What are the differences between props and state ?

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

• React JS
• React States
• React Js Props

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

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

// 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;

Javascript

// Filename - 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;

CSS

/* Filename - App.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. 

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: The previous example is extented with car components having data in state whcih is modified when the button is clicked.

Javascript

// Filename - 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;

Javascript

// Filename - 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

Javascript

// Filename - 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;

CSS

/* Filename - App.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

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.	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.