React is built on a component-based architecture, where data flows from one component to another. Understanding how to pass data between components is crucial for building dynamic and interactive applications. In this guide, we’ll explore several common scenarios and techniques for passing data between components.

1. Passing Data from Parent to Child

The most common way to pass data in React is from a parent component to its child components via props. This is a straightforward process where the parent supplies data as attributes, and the child accesses them as properties.

Example:

// Parent.js

import Child from './Child';

const Parent = () => {

const message = "Hello from Parent!";

return (

<div>

<h1>Parent Component</h1>

</div>

);

};

export default Parent;

// Child.js

const Child = ({ message }) => {

return (

<div>

<h2>Child Component</h2>

<p>{message}</p>

</div>

);

};

export default Child;

Explanation:

In the example above, the Parent component passes a message prop to the Child component, which then displays it. This direct flow is simple and effective for one-way data transmission.

2. Passing Data from Child to Parent

Sometimes you need to send data from a child component back to its parent. This is typically achieved by passing a callback function (as a prop) from the parent to the child. The child then calls this function, optionally providing data as an argument.

Example:

// Parent.js

import Child from './Child';

const Parent = () => {

const handleDataFromChild = (data) => {

console.log("Data received from child:", data);

};

return (

<div>

<h1>Parent Component</h1>

</div>

);

};

export default Parent;

// Child.js

const Child = ({ sendDataToParent }) => {

const handleClick = () => {

sendDataToParent("Hello, Parent! This is your child.");

};

return (

<div>

<h2>Child Component</h2>

<button onClick={handleClick}>Send Data to Parent</button>

</div>

);

};

export default Child;

Explanation:

In this scenario, the parent component provides a function (handleDataFromChild) to the child as sendDataToParent. When the button in the child is clicked, this function is called with some data, effectively "sending" data back to the parent.

3. Passing Data Between Sibling Components (Lifting State Up)

When two sibling components need to share data, the common approach is to "lift the state up" to their nearest common parent. The parent holds the shared state and passes it down to both siblings.

Example:

// Parent.js

import { useState } from 'react';

import SiblingOne from './SiblingOne';

import SiblingTwo from './SiblingTwo';

const Parent = () => {

const [sharedData, setSharedData] = useState("Initial shared data");

return (

<div>

<h1>Parent Component</h1>

</div>

);

};

export default Parent;

// SiblingOne.js

const SiblingOne = ({ setSharedData }) => {

return (

<div>

<h2>Sibling One</h2>

<button onClick={() => setSharedData("Updated from Sibling One")}>

Update Shared Data

</button>

</div>

);

};

export default SiblingOne;

// SiblingTwo.js

const SiblingTwo = ({ sharedData }) => {

return (

<div>

<h2>Sibling Two</h2>

<p>{sharedData}</p>

</div>

);

};

export default SiblingTwo;

Explanation:

The Parent component manages the state (sharedData) and passes the state to SiblingTwo as well as the state updater (setSharedData) to SiblingOne. This way, when SiblingOne updates the data, SiblingTwo automatically receives the updated value.

4. Sharing Data Globally Using the Context API

For larger applications, prop drilling (passing props through many layers) can become cumbersome. React’s Context API provides a way to share data globally without manually passing props through every level.

Example:

// DataContext.js

import { createContext } from 'react'

const DataContext = createContext();

export default DataContext;

// Parent.js

import { useState } from 'react';

import DataContext from './DataContext';

import ChildOne from './ChildOne';

import ChildTwo from './ChildTwo';

const Parent = () => {

const [data, setData] = useState("Global data");

return (

<DataContext.Provider value={{ data, setData }}>

<h1>Parent Component</h1>

</DataContext.Provider>

);

};

export default Parent;

// ChildOne.js

import { useContext } from 'react';

import DataContext from './DataContext';

const ChildOne = () => {

const { setData } = useContext(DataContext);

return (

<div>

<h2>Child One</h2>

<button onClick={() => setData("Data updated by Child One")}>

Update Global Data

</button>

</div>

);

};

export default ChildOne;

// ChildTwo.js

import { useContext } from 'react';

import DataContext from './DataContext';

const ChildTwo = () => {

const { data } = useContext(DataContext);

return (

<div>

<h2>Child Two</h2>

</div>

);

};

export default ChildTwo;

Explanation:

Here, DataContext is created to hold global data. The Parent component uses the DataContext.Provider to supply the data and updater function to all its child components. Both ChildOne and ChildTwo can access the context without needing to pass props down manually.

5. Conclusion

Passing data between components in React is a fundamental skill that helps in creating interactive, dynamic applications. Whether you’re:

Sending data from parent to child via props
Receiving data from child components with callback functions
Lifting state up for sibling communication
Using the Context API for global data sharing

Understanding these methods will help you structure your code more efficiently as you build more complex applications.