In React, passing data from one component to another component is a common task. It is helpful in building a dynamic and interactive web application. We can pass data in components from parent to child, child to parent, and between siblings as shown below.
Table of Content
Steps to create the application
Step 1: Create a React application using the following command.
npx create-react-app myapp
Step 2: After creating your project folder i.e. myapp, move to it using the following command.
cd myapp
Project Structure
It will look like the following. We have created two Components named Child.js and Parent.js as shown below.
We have created two Components named Child.js and Parent.js as shown in the above structure.
Approach 1: Passing data from Parent to Child
For passing data from parent to child component, we use props. Props data is sent by the parent component and cannot be changed by the child component as they are read-only.
Example: The following example covers how to pass data from Parent to Child Component in ReactJS.
Javascript
// App.jsimport React from "react";import "./index.css";import Parent from "./Parent";import "./App.css";const App = () => { return ( <div className="App"> <h1 className="neveropen">Geeksforneveropen</h1> <h3>This is App.js Component</h3> <Parent /> </div> );};export default App; |
Javascript
// Parent.jsimport React from "react";import Child from "./Child";const Parent = () => { const data = "Data from Parent to Child"; return ( <div> <h4>This is Parent component</h4> <Child data={data} /> </div> );};export default Parent; |
Javascript
// Child.jsimport React from "react";const Child = (props) => { return <h3> {props.data} </h3>;};export default Child; |
CSS
/* App.css*/.App { text-align: center;}.neveropen { color: green;} |
Step to Run Application: Run the application using the following command from the root directory of the project
npm start
Output: This output will be visible on http://localhost:3000/
Approach 2: Passing data from Child to Parent Component:
For passing the data from the child component to the parent component, we have to create a callback function in the parent component and then pass the callback function to the child component as a prop. This callback function will retrieve the data from the child component. The child component calls the parent callback function using props and passes the data to the parent component.
Example: The following example covers how to pass data from Child to Parent Component in ReactJS.
Javascript
// App.jsimport React from "react";import "./index.css";import Parent from "./Parent";import "./App.css";const App = () => { return ( <div className="App"> <h1 className="neveropen">neveropen</h1> <Parent /> </div> );};export default App; |
Javascript
// Parent.jsimport React from "react";import Child from "./Child";class Parent extends React.Component { state = { msg: "", }; handleCallback = (childData) => { this.setState({ msg: childData }); }; render() { const { msg } = this.state; return ( <div> <Child parentCallback={this.handleCallback} /> <h1> {msg}</h1> </div> ); }}export default Parent; |
Javascript
// Child.jsimport React from "react";class Child extends React.Component { onTrigger = () => { this.props.parentCallback("Welcome to GFG"); }; render() { return ( <div> <br></br> <br></br> <button onClick={this.onTrigger}> Click me </button> </div> ); }}export default Child; |
CSS
/* App.css */.App { text-align: center;}.container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;}.item { min-width: 33rem; text-align: left;}.neveropen { color: green;} |
Step to Run Application: Run the application using the following command from the root directory of the project
npm start
Output: This output will be visible on http://localhost:3000/
Approach 3: Passing data between Siblings
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
Here we will use context API to pass the data. When the button in child1 is clicked it will update the data in the Child2 component.
Project Structure: It will look like the following. We have created two Components named Child1.js and Child2.js as shown below.
Example: In this example we will use context API to pass the data from one sibling Child1 to other sibling Child2.
Javascript
// App.jsimport { React, useState, createContext } from "react";import "./index.css";import Child1 from "./Child1";import "./App.css";import Child2 from "./Child2";// Create a new context and exportexport const NameContext = createContext();// Create a Context Providerconst NameContextProvider = ({ children }) => { const [name, setName] = useState(undefined); return ( <NameContext.Provider value={{ name, setName }}> {children} </NameContext.Provider> );};const App = () => { return ( <div className="App"> <h1 className="neveropen">neveropen</h1> <NameContextProvider> <Child1 /> <Child2 /> </NameContextProvider> </div> );};export default App; |
Javascript
// Child1.jsimport React, { useContext } from "react";import { NameContext } from "./App";const Child1 = () => { const { setName } = useContext(NameContext); function handle() { setName("Geeks"); } return ( <div> <h3>This is Child1 Component</h3> <button onClick={() => handle()}>Click </button> </div> );};export default Child1; |
Javascript
// Child2.jsimport React, { useContext } from "react";import { NameContext } from "./App";const Child2 = () => { const { name } = useContext(NameContext); return ( <div> <br /> <h4>This is Child2 Component</h4> <h4>hello: {name}</h4> </div> );};export default Child2; |
CSS
/* App.css */.App { text-align: center;}.neveropen { color: green;} |
Step to Run Application: Run the application using the following command from the root directory of the project
npm start
Output: This output will be visible on http://localhost:3000/
