What are the differences between props and state ?
Last Updated :
02 Nov, 2023
In React JS, the main difference between props and state is that the props are a way to pass the data or properties from one component to other components while the state is the real-time data available to use within that only component.
Prerequisites
Let’s understand the differences between props and states using examples.
Steps to create React Application
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
Project Structure:
Project Structure
Props are known as properties it can be used to pass data from one component to another. Props cannot be modified, read-only, and Immutable.
Example: Here the fruits prop is passed and data is displayed in the fruit component.
Javascript
import Fruit from './Fruit'
function App() {
const fruits =
{
name: "Mango" ,
color: "Yellow"
}
return (
<div className= "App" >
<Fruit fruits={fruits} />
</div>
);
}
export default App;
|
Javascript
import React from "react"
const Fruit = (props) => {
return (
<div className= "fruit" >
<h1>List of Fruits</h1>
<p>Name: {props.fruits.name}</p>
<p>Color: {props.fruits.color}</p>
</div>
)
}
export default Fruit;
|
CSS
.App {
text-align : center ;
}
|
Create a Component known as Fruit.js and add the below code:
Step to Run Application: Run the application using the following command from the root directory of the project:
npm startOutput:
The following will be the output when we execute the above command. The data will be passed from the Parent component i.e. App.js to the Child component i.e. Fruit.js with the usage of the “Props” feature.
The state represents parts of an Application that can change. Each component can have its State. The state is Mutable and It is local to the component only.
Example: The previous example is extented with car components having data in state whcih is modified when the button is clicked.
Javascript
import './App.css' ;
import Fruit from './Fruit'
import Car from './Car' ;
function App() {
const fruits =
{
name: "Mango" ,
color: "Yellow"
}
return (
<div className= "App" >
<Fruit fruits={fruits} />
<hr></hr>
<Car />
</div>
);
}
export default App;
|
Javascript
import React, { Component } from "react"
class Car extends Component {
constructor() {
super ()
this .state = {
car: 'Ferrari'
}
}
changeMessage() {
this .setState({
car: 'Jaguar'
})
}
render() {
return (
<div className= "App" >
<h1>{ this .state.car}</h1>
<button onClick={() => this .changeMessage()}>
Change
</button>
</div>
)
}
}
export default Car
|
Javascript
import React from "react"
const Fruit = (props) => {
return (
<div className= "fruit" >
<h1>List of Fruits</h1>
<p>Name: {props.fruits.name}</p>
<p>Color: {props.fruits.color}</p>
</div>
)
}
export default Fruit;
|
CSS
.App {
text-align : center ;
}
|
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: The following will be the output when we execute the above command. The data is local to the component “Car” only and it can be updated using the button change in the screen.
Differences between props and state
The Data is passed from one component to another. |
The Data is passed within the component only. |
It is Immutable (cannot be modified). |
It is Mutable ( can be modified). |
Props can be used with state and functional components. |
The state can be used only with the state components/class component (Before 16.0). |
Props are read-only. |
The state is both read and write. |
Points Discussed
- Props are used to pass data from one component to another.
- The state is local data storage that is local to the component only and cannot be passed to other components.
- The this.setState property is used to update the state values in the component.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...