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

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

• 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.

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.

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:

Passing data between Siblings:

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

1. Combination of the above two methods (callback and use of props).
2. Using Redux.
3. 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: