Difference between state & props

Let’s understand the difference between state and props in this blog in detail with small example.

What is State in Reactjs?

State is simple data storage object which we can use inside component only. We can access the data which we have stored in state inside the component. We cannot use access the data in a connected component or child component.

The state is a built-in React object that is used to contain data or information about the component.

we can change the state value on any action or at any time. When the state value change it will re-render the component. State allows us to manage to change data in an application.

What is the syntax of the state in-class component?

create state:

this.state = {
  data: ''
};

use state:

<p>{this.state.data}</p>

set or change value of state:

this.setState({ data: 'say hello' });

What is the syntax of the State in a functional component?

create state:

const [data, setData] = React.useState('');

use state:

<p>{data}</p>

set or change value of state:

setData('say hello');

What are Props in Reactjs?

Props stand for “Properties”, which is read-only. We cannot change the value of props, it is similar to HTML object, which we can use but cannot change.

We can pass value to another parent-child component using props. We can transfer data from parent to child and child to parent as well.

Props are used to pass data from one component to another.

What is the syntax of props in-class component?

create props and pass values to parent component from child component:

these props value pass from the child to the parent component.

this.props.getData('hello world');

This getData props need to pass as params in child component import see below:

<Child getData={this.getDataFun} />

now, create the function getDataFun in the parent component.

const getDataFun = (val) => {
  // get props value in val params, store it in state or however you want
}

What is the syntax of props in functional component?

Let pass data from parent to child component

<Child data={data} />

data is the state or variable which has value which we want to use in child component

in child component:

<p>{props.data}</p>

Are state and props mutable?

Now, you can understand that we can change the value of state so the state is mutable and we cannot change the value of props so props are immutable.

Hope this article helps you to differentiate between state and props.

If you have any questions regarding state and props or any other things in Javascript, React, and Redux. Please comment below. will create an article on it in detail.

Thanks for reading my article. Hope this helps you to know state and props in a better way. Follow me to learn more about react and redux in a better and easy way.

Happy coding … :)