ReactJS Props | Understand all about Props

ReactJS Props: In ReactJS, the props are a type of object which is used to store the value of attributes of a tag. The word “props” implies “properties”, and it is quite similar to HTML attributes when we talk about its working functionality.

Props are immutable so we cannot modify the props from inside the component. Inside the components, we can add attributes called props. These attributes are available in the component as this. props and can be used to render dynamic data in our render method.

Using ReactJS Props

When we need immutable data in our component, we can just add props to reactDOM.render() function in main.js and use it inside our component.

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>  
            <h1> Welcome to { this.props.name } </h1>    
            <p> <h4> TechieBundle is a tech oriented website where you will get to know so many things and your knowledge will be enhanced. </h4> </p>          
          </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;

Default Prop

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

App.jsx

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> TechieBundle is a tech oriented website where you will get to know so many things and your knowledge will be enhanced. </p>          
          </div>  
        );  
    }  
}  
App.defaultProps = {  
   name: "TechieBundle"  
}  
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'));

State and Props in ReactJS

States are the type of built-in object in ReactJS.

We can create, handle, or manage our data within the component using the state object. Data can be passed by the props but the data cannot be passed by state itself. Using the state, the data is managed internally within the component.

We can combine both the state and props within our application in ReactJS. The steps for this combination process of the states and props within our ReactJS are as follows:

First, the state needs to be set within our parent component.
Then, the state can be passed as the props within the child component.

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;

Main.js

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

Read more

React create-react app
React JSX | JavaScript XML
Component in ReactJS
State Management in ReactJS