How to pass data from one component to other component in ReactJS ? - GeeksforGeeks

25 May, 2021
In this article, We are going to see how to pass data from one component to another component. We have multiple ways of passing data among components. We can pass data from parent to child, from child to parent, and between siblings. So now let’s see how can we do so.
Creating React Application:
Step 1: Create a React application using the following command.npx create-react-app myapp
npx create-react-app myapp
Step 2: After creating your project folder i.e. myapp, move to it using the following command.cd myapp
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.
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.
Parent.js
import React from 'react'import Child from './Child';  const Parent = () => {const data = "Hello Everyone";    return(        <div>          <Child data={data}/>        </div>    );}  export default Parent;
Child.js
import React from 'react';  const Child = (props) => {    return(      <h2> {props.data} </h2>    );}  export default Child;
App.js
import React from 'react';import "./index.css";import Parent from './Parent'  const App = () => {  return (    <div className="App">      <Parent/>    </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:
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.
Parent.js
import 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>             <h1> {msg}</h1>             <Child parentCallback = {this.handleCallback}/>               </div>        );    }}  export default Parent;
Child.js
import 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;
App.js
import React from 'react';import "./index.css";import Parent from './Parent';  const App =() => {  return (    <div className="App">      <Parent/>    </div>  );}  export default App;
Output:
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
Combination of the above two methods (callback and use of props).
Using Redux.
ContextAPI
Example: In this example, we are passing data between siblings using ContextAPI. Hence, we have a different project for this.
Project Structure: It will look like the following. We have created two Components named Child1.js and Child2.js as shown below.
Child1.js
import React, {createContext} from "react";import Child2 from './Child2';  const Name = createContext();  const Child1 = () => {    return (      <>        <Name.Provider value={'Archna'}>        <Child2/>        </Name.Provider>      </>    );}  export default Child1;export {Name};
Child2.js
import React from "react";import { Name } from "./Child1";  const Child2 = () => {    return (      <>        <Name.Consumer>          {(fname) => {            return <h1>My Name is {fname}</h1>;          }}        </Name.Consumer>      </>    );};  export default Child2;
App.js
import React from 'react';import "./index.css";import Child1 from './Child1';  const App =() => {  return (    <div className="App">      <Child1/>    </div>  );}  export default App;
Output:
Picked
React-Questions
ReactJS-Basics
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to redirect to another page in ReactJS ?
ReactJS setState()
Re-rendering Components in ReactJS
ReactJS defaultProps
How to set background images in ReactJS ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Convert a string to an integer in JavaScript