Skip to content
Related Articles

Related Articles

Improve Article

What are the differences between props and state ?

  • Last Updated : 28 Jun, 2021

Have you ever wondered how can we pass the data between the components in ReactJS? We can pass the data between the components using Props and State. So, let us know how we can pass the data using props and state and understand the difference between the two.

We will learn about props and state with the help of an example project in ReactJS.

Steps to Create React Project:

  • 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: 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: Modify the default code with the below code. 

App.js




import Fruit from './Fruit'
function App() {
    
  const fruits=
    {
    name:"Mango",
    color:"Yellow"
    }
  
  return (
    <div className="App">
      <Fruit fruits={fruits} />
    </div>
  );
}
  
export default App;

App.css




.App{
  text-align: center;
    
}

 



Create a Component known as Fruit.js and add the below code

Fruit.js




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;

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. 

State: 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: Let us create a Class component named  Car.js within the same project “fruits”.

Add the following code in the Car.js component.

Car.js




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

 



App.js




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;

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.

Difference between props and state:

PROPS

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.State can be used only with the state components/class component (Before 16.0).
Props are read-only.State is both read and write.

Points Discussed:

  1. Props are used to pass data from one component to another.
  2. The state is a local data storage that is local to the component only and cannot be passed to other components.
  3. The this.setState property is used to update the state values in the component.



My Personal Notes arrow_drop_up
Recommended Articles
Page :