React JS Props Overview with examples

4 years ago
Zaid Bin Khalid
3,026 Views
3

In this session, we will learn about the React JS Props overview with examples and codes.

Difference between State and Props

The major difference between state and props is that props are Changeless. This is why the child components should only pass data from the state using props, the container component should define the state that can be updated and changed.

Using Props

To get changeless data in our component, we just add props into reactDom.render() function in main.js and use it inside the component.

//App.jsx

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;

The above mention code will display the following code result as shown below:

Default Props

Instead of adding it to the reactDom.render() element, You can also set default property values directly on the component constructor.

//App.JSX

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;

The main.js file is below.

//main.js

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

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

The above mention code will display the following code result same as before shown below:

State and Props

With the help of the following example, you will know how to combine state and props in your app. using props we are setting the state in our parent component and passing it down to the component tree. We are setting headerProp and contentProp used in child components, inside the render function.

The app.jsx file is below.

//App.JSX

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;

The main.js file code is below.

//main.js

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

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

The above mention code will display the following result same as shown in the previous two examples, the only thing is change is the source of our data, which is now coming from the state.