React Props

Props are short for Properties and are read-only components. It's an array that stores the value of a tag's attributes and functions similarly to HTML attributes. Props to a component are what arguments are to functions and attributes are to HTML. Props cannot be modified/updated from inside the component, that's why it is stated as immutable.

In the js file, we can simply add props to the reactDOM.render() function and use it within our component. The key thing to note here is that data with props is transferred in a one-way flow.

Let's get started with this tutorial.

Example: react props and how to use them in your app?

Use the same syntax as HTML attributes to give props to a component. Let's understand React prop with the help of an example:

App.js

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.headerProp}</h1>
            <h2>{this.props.contentProp}</h2>
         </div>
      );
   }
}
export default App;

Main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App headerProp = "Header from props..." contentProp = "Content
   from props..."/>, document.getElementById('app'));

export default App;

Output:

Default Prop

It's not mandatory to always add props in the reactDom.render() all the time. Default props may also be placed directly on the part function. Let's understand it with the help of the below example:

App.js

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.headerProp}</h1>
            <h2>{this.props.contentProp}</h2>
         </div>
      );
   }
}
App.defaultProps = {
   headerProp: "Header from props...",
   contentProp:"Content from props..."
}
export default App;
?

?

?

Main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

Output:

State and Props

In your app, you can mix and match state and props. Props may be used to set the state in the parent component and transfer it to the child component. Similar to other concepts let's understand this also with the help of an example:

App.js

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         header: "Header from props...",
         content: "Content from props..."
      }
   }
   render() {
      return (
         <div>
            <Header headerProp = {this.state.header}/>
            <Content contentProp = {this.state.content}/>
         </div>
      );
   }
}
class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.headerProp}</h1>
         </div>
      );
   }
}
class Content extends React.Component {
   render() {
      return (
         <div>
            <h2>{this.props.contentProp}</h2>
         </div>
      );
   }
}
export default App;

Main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

The outcome would be identical to the previous two examples; the only difference is the source of our results, which will now originate from the state.

Output:

Conclusion

It takes time to grasp React's approach to data manipulation. I hope that my article has helped you improve your React skills.