What is React Props? | React props | React Tutorial

What is React Props? | React props | React Tutorial

React Props
Here Props stand for "Properties". These are read-only components. This is an object which stores the value of attributes of a tag and works similar to the HTML attributes. these give a way to pass data from one component to other components. This is similar to function arguments. We cannot modify the props from inside the component because Props are immutable.  we can add attributes called props. The attributes are available in the component as this.props. These can be used to render dynamic data in our render method. When you need immutable data in the component, you have to add props to reactDom.render() method in the main.js file of your ReactJS project and used it inside the component in which you need. It can be explained in the below example.

Example:

App.js

import React, { Component } from 'react';  
class App extends React.Component {  
   render() {     
      return (  
          <div>  
            <h1> Welcome to { this.props.name } </h1>    
            <p> <h4> Tutorials link is one of the best resources for CS tutorials.</h4> </p>          
          </div>  
      );  
   }  
}  
export default App;  

Main.js

import React from 'react';  
import ReactDOM from 'react-dom';  
import App from './App.js';  
  
ReactDOM.render(<App name = "Tutorials link" />, document.getElementById('app'));  

Output:

Welcome to Tutorials link   
Tutorials link is one of the best resources for CS tutorials.

Default Props
It's not necessary to always add props in the reactDom.render() element and we can also set default props directly on the component constructor. It's shown in the below example.

Example
App.js

import React, { Component } from 'react';  
class App extends React.Component {  
   render() {     
      return (  
          <div>  
              <h1>Default Props Example</h1>  
            <h3>Welcome to {this.props.name}</h3>   
            <p>Tutorials link is one of the best resources for CS tutorials.</p>          
          </div>  
        );  
    }  
}  
App.defaultProps = {  
   name: "Tutorials link"  
}  
export default App;  

Main.js

import React from 'react';  
import ReactDOM from 'react-dom';  
import App from './App.js';  
  
ReactDOM.render(<App/>, document.getElementById('app'));  

Output:

Default Props Example
Welcome to Tutorials link
Tutorials link is one of the best resources for CS tutorials.

State and Props
It's possible to combine both state and props in your app. we can set the state in the parent component. Then pass it in the child component using props. It can be shown in the below example.

Example
App.js

import React, { Component } from 'react';  
class App extends React.Component {  
   constructor(props) {  
      super(props);  
      this.state = {  
         name: "Tutorials link",         
      }  
   }  
   render() {  
      return (  
         <div>  
            <JTP jtpProp = {this.state.name}/>             
         </div>  
      );  
   }  
}  
class JTP extends React.Component {  
   render() {  
      return (  
          <div>  
              <h1>State & Props Example</h1>  
              <h3>Welcome to {this.props.jtpProp}</h3>  
              <p>Tutorials link is one of the best resources for CS tutorials.</p>  
         </div>    
      );  
   }  
}  
export default App;  

Main.js

import React from 'react';  
import ReactDOM from 'react-dom';  
import App from './App.js';  
  
ReactDOM.render(<App/>, document.getElementById('app'));  

Output:

State & Props Example
Welcome to Tutorials link
Tutorials link is one of the best resources for CS tutorials.