What is Props and State in React js

React is one of the Highly used JavaScript libraries that every front-end developers should know. From startups to big corporations, companies are adopting this widely used technology. Big names like Netflix, Airbnb, The New York Times, and many more are already using it on their websites and mobile applications.

This article will help you get familiar with a very important concept of React, the state and props.

What are props?

Props is short form of properties and they are use to pass data between React components. React's data flow between components is Uni-directional (from parent components to child only) Props are read-only components.

How do you pass data with props?

I will show you an example of how data can be passed by using props:

class ParentComponents extends Component {    
    render() {    
        return (        
            <ChildComponents name="First Name" />    
        );  
    }
}

const ChildComponents = (props) => {    
    return <p>{props.name}</p>; 
};

First we need some data to parent components and assign in to a child components "props" attribute:

<ChildComponents name="First Child" />

Then we can pass data with props like we're giving an argument to a function:

const ChildComponents = (props) => {  
  // your logic here...
};

What is State?

React State holds the data for a component. The state is an updatable structure that is used to contain data or information about the component and can change over time.t is the heart❤ of the react component.

Here i am show you how to use state:

class Learnprops extends React.Component {    
    constructor() {    
        this.state = {      
            subject: React,      
            topic: "Reactprops"    
        };  
    }    

    render() {    
        return (      
            <div>        
              <p>{this.state.subject}</p>        
              <p>{this.state.topic}</p>      
            </div>    
        );  
    }
}

How do you update a component’s state?

State should modify by special method setState().

this.state.name = “jemin”; // wrong way

this.setState({         // correct  way
    name: "jemin"
});

The first thing we must do is to initialize our state data before we can use it in render(). To set the initial state, we use this.state in the constructor with our React.Component syntax.

What are the differences between props and state?

Finally let's see the core difference between props and state.

• Data from props is read-only, and cannot be modified by a component that is receiving it from outside.
• State data can be modified by its own component.
• Components receive data from outside with props, whereas they can create and manage their own data with state.
• Props are used to pass data, whereas state is for managing data.

try it, play it, do whatever you want with it. i hope you like👍 it. Happy Coding💻

Jemin Kukadiya