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 states 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.
Javascript
// App.jsimport Fruit from './Fruit'function App() { const fruits = { name: "Mango", color: "Yellow" } return ( <div className="App"> <Fruit fruits={fruits} /> </div> );}export default App; |
CSS
/* App.css */.App { text-align: center;} |
Create a Component known as Fruit.js and add the below code:
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; |
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.
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
// App.jsimport './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. | 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.
