Understand all about Props In React Js

Default Props in ReactJS

Generally, the default props can be sent directly to the constructor of our component. Thus, the props need to be added to the reactDOM.render by us.

Now let us go through the code implementation of these default props.

Example:

Here in the code below, we can see how the default props are set within App.js.

import React, { Component } from 'react';  

class App extends React.Component {  

   render() {    

      return (  

          <div>  

              <h1>Example for the default props : </h1>  

            <h3>Welcome to the {this.props.name}</h3>  

            <p>Here you will get to know so many things and your knowledge will be enhanced .</p>          

          </div>  

        );  

    }  

}  

App.defaultProps = {  

   name: "World of Programming!"  

}  

export default App;

As shown in the code below, default props do not need to be passed through the render method called reactDOM.render() within the Main.js file of the ReactJS project.

import React from 'react';  

import ReactDOM from 'react-dom';  

import App from './App.js';  

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

Now let us discuss states and props.

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:

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

Now let us see a code implementation for this with an example:

Example:

The code given below is for the App.js file. This code shows how we can set the state in our parent component and then pass it within the child component as the props and use it.

import React, { Component } from 'react';  

class App extends React.Component {  

   constructor(props) {  

      super(props);  

      this.state = {  

         name: "Programming World",        

      }  

   }  

   render() {  

      return (  

         <div>  

            <PW pwProp = {this.state.name}/>            

         </div>  

      );  

   }  

}  

class PW extends React.Component {  

   render() {  

      return (  

          <div>  

              <h1>The example for the combination of states and props within an application.</h1>  

              <h3>Welcome to the this.props.pwProp}</h3>  

              <p>Here you will get to know so many things and your knowledge will be enhanced .</p>  

         </div>    

      );  

   }  

}  

export default App; 

The below code is for the Main.js file of React project:

import React from 'react';  

import ReactDOM from 'react-dom';  

import App from './App.js';  

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

State vs. Props

Let's go through the fundamental differences between state and props:

And with that, we are now familiar with props, one of the most important concepts of React.

Conclusion

The props objects play a very important role in ReactJs. We can use the dynamic data within our component by passing the attribute through props from one component to another component. As the props are read-only components, the props that we are passing from the parent component cannot be changed in the child component where the data has been passed.

This was all about Props in ReactJS. As you know, these days, along with data structure and algorithms, your development skill is equally crucial to making a mark in the tech industry. Therefore, a techie should always keep himself upgraded and updated with the latest technology and software in the field of Web Development. 

Simplilearn offers some excellent Caltech Coding Bootcamp that you can check out. These courses are designed to help you master both the front-end and back-end with different technologies and tools like AngularMVC and SpringBoot.

You can also enroll in several free courses available on the SkillUp platform, a Simplilearn initiative, and become an expert in different domains of your choice, such as Machine Learning, Artificial Intelligence, business analytics, etc.