Open In App
Related Articles

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

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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.

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.js
import React from "react";
import "./index.css";
import Parent from "./Parent";
import "./App.css";
 
const App = () => {
    return (
        <div className="App">
            <h1 className="geeks">Geeksforgeeks</h1>
            <h3>This is App.js Component</h3>
            <Parent />
        </div>
    );
};
 
export default App;

                    

Javascript

// Parent.js
import 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.js
import React from "react";
 
const Child = (props) => {
    return <h3> {props.data} </h3>;
};
 
export default Child;

                    

CSS

/* App.css*/
.App {
    text-align: center;
}
 
.geeks {
    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/

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

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.js
import React from "react";
import "./index.css";
import Parent from "./Parent";
import "./App.css";
 
const App = () => {
    return (
        <div className="App">
            <h1 className="geeks">GeeksforGeeks</h1>
            <Parent />
        </div>
    );
};
 
export default App;

                    

Javascript

// 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>
                <Child
                    parentCallback={this.handleCallback}
                />
                <h1> {msg}</h1>
            </div>
        );
    }
}
 
export default Parent;

                    

Javascript

// 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;

                    

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;
}
 
.geeks {
    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/

Peek-2023-10-06-11-11

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.

ezgifcomgifmaker

Example: In this example we will use context API to pass the data from one sibling Child1 to other sibling Child2.

Javascript

// App.js
 
import { React, useState, createContext } from "react";
import "./index.css";
import Child1 from "./Child1";
import "./App.css";
import Child2 from "./Child2";
 
// Create a new context and export
export const NameContext = createContext();
 
// Create a Context Provider
const NameContextProvider = ({ children }) => {
    const [name, setName] = useState(undefined);
 
    return (
        <NameContext.Provider value={{ name, setName }}>
            {children}
        </NameContext.Provider>
    );
};
 
const App = () => {
    return (
        <div className="App">
            <h1 className="geeks">GeeksforGeeks</h1>
            <NameContextProvider>
                <Child1 />
                <Child2 />
            </NameContextProvider>
        </div>
    );
};
 
export default App;

                    

Javascript

// Child1.js
 
import 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.js
 
import 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;
}
 
.geeks {
    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/Peek-2023-10-06-12-07





Last Updated : 09 Oct, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads
Complete Tutorials