How to Pass Data From Child Component To Its Parent In ReactJS ?

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

Last Updated : 24 Mar, 2025

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

CSS

/* Filename - App.css*/
.App {
    text-align: center;
}

.geeks {
    color: green;
}

JavaScript

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

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

// Filename - Child.js

import React from "react";

const Child = (props) => {
    return <h3> {props.data} </h3>;
};

export default Child;

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.

CSS

/* Filename - 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;
}

JavaScript

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

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

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

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

CSS

/* Filename - App.css */

.App {
    text-align: center;
}

.geeks {
    color: green;
}

JavaScript

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

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

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

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.

How to Pass Data From Child Component To Its Parent In ReactJS ?

A

archnabhardwaj

News

Improve

Article Tags :

Similar Reads

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

In React, passing data from one component to another component is a common task. It helps build 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. We have 3 approaches to share or pass the data between

How to Pass Data From Child Component To Its Parent In ReactJS ?

Passing data from a child component to its parent in ReactJS can be required while building dynamic web applications. Unlike passing data from a parent to a child using props, sharing data from a child component back to the parent requires a different approach. Pass Data from Child Component to its

How to Pass a React Component into Another to Transclude Content?

Transclusion refers to Passing a react component's content to another component. Passing component to another in react enable use to render the data inside other component. This content can be rendered as component's children. ApproachTo pass a react component to another in react we will pass it as

How to pass data from Parent to Child component in Angular ?

We can use the @Input directive for passing the data from the Parent to Child component in Angular Using Input Binding: @Input - We can use this directive inside the child component to access the data sent by the parent component. Here app.component is the Parent component and cdetail.component is t

How to Pass Value from One Child Component to Another in VueJS ?

Vue.js is a JavaScript framework used in building powerful and beautiful user interfaces. The key feature of Vue.js is its component-based architecture that allows the developers to create reusable and modular components. In this article, we will learn how to pass value from one child component to a

How to convert functional component to class component in ReactJS ?

ReactJS offers two primary ways of creating components: functional components and class components. While functional components are more concise and easier to reason about, there are situations where class components may be necessary with the flexibility to use lifecycle methods and manage the state

How To Pass Props From Parent to Child Component in ReactJS?

ReactJS is a powerful library that helps developers build interactive user interfaces by breaking them into reusable components. One of the essential features of React is the ability to pass data between components using props. In React, props allow parent components to send data or functions to chi

How to pass data into table from a form using React Components ?

React JS is a front-end library used to build UI components. This article will help to learn to pass data into a table from a form using React Components. This will be done using two React components named Table and Form. We will enter data into a form, which will be displayed in the table on 'submi

How to Call Parent Components's Function from Child Component in React ?

In React, it is very important to manage communication between components for building flexible and maintainable applications. Sometime, you need to trigger a function defined in a parent component from a child component. In this article, we'll see how to achieve this in React by passing down functi

How to communicate from parent component to the child component in Angular 9 ?

Angular makes the communication between components very easy. In this article, we will learn how to communicate from a parent component to the child component. Approach: Let's create two components: parent child In the parent component, declare the property that you want to receive in the child comp