How to Pass Data from One Component to Another Component in ReactJS?

In ReactJS, components are the building blocks of your user interface. Components allow you to create modular, reusable UI elements, but sometimes these components need to communicate with each other.

In this article, we will explore the different methods to pass data between components in ReactJS.

1. Passing data from Parent to Child in React

The most common way to pass data between components is through props (short for properties). Props are read-only and allow you to pass information from a parent component to its child components. When you define a child component, you can pass it data by setting its props.

First, you need to create a React App - Create a New React App

Folder Structure

👁 Image

Step to Run Application: Run the application using the following command from the root directory of the project

npm start

Output

👁 Screenshot-from-2023-10-06-10-46-32

In this code

• The App component renders the Parent component.
• The Parent component passes a string ("Data from Parent to Child") as a prop (data) to the Child component.
• The Child component displays this data passed down from the Parent.

2. Passing data from Child to Parent Component

In React, data usually flows from parent to child through props. But what if you need to pass data from a child component back to the parent? To achieve this, you can pass a callback function from the parent to the child. When the child component needs to send data to the parent, it calls this function with the data.

Output

👁 Peek-2023-10-06-11-11

In this code

• App.js renders the Parent component.
• Parent.js defines a state (msg) and a handleCallback method to update the state when the child sends data.
• Child.js has a button, and when clicked, it calls the parentCallback function (passed from the parent) to send the message "Welcome to GFG" back to the parent.
• The parent updates its state with the data and displays it in an <h1> tag.

3. Passing Data Between Sibling Components

When you need to pass data between sibling components (components that share the same parent), the best way is to use their common parent component as a mediator. The parent component can manage the shared state and pass it down to both child components.

For passing data among siblings, there are multiple methods we can choose from as shown below

• Combination of the above two methods (callback and use of props).
• Using Redux.
• ContextAPI

Folder Structure

👁 ezgifcomgifmaker

Output👁 Peek-2023-10-06-12-07

In this code

• App.js provides a shared name state via NameContext.
• Child1.js updates the name state to "Geeks" when a button is clicked.
• Child2.js reads and displays the name state.

Conclusion

By following these methods you can easily pass data from parent to child, child to parent and also able to pass data between the siblings.