What are the differences between props and state ?

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 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
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
Props are used to pass data from one component to another.The state is a 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.
Props are used to pass data from one component to another.
The state is a 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.
Picked
React-Questions
Difference Between
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between Synchronous and Asynchronous Transmission
Difference Between Method Overloading and Method Overriding in Java
Difference Between Go-Back-N and Selective Repeat Protocol
Time complexities of different data structures
Difference between Compile-time and Run-time Polymorphism in Java
How to fetch data from an API in ReactJS ?
How to redirect to another page in ReactJS ?
Axios in React: A Guide for Beginners
ReactJS Functional Components