How to Pass Data Between React Components

In React, passing data between components is a fundamental concept that allows components to communicate and share information. There are several ways to pass data depending on the relationship between the components. Here’s an overview:

✅ 1️⃣ Passing Data from Parent to Child (Props):

Props (short for properties) allow a parent component to pass data to its child components. This is the most common method of data flow in React.

Example:

// Parent Component
const Parent = () => {
const message = "Hello, I am passing data!";

return <Child data={message} />;
};

// Child Component
const Child = ({ data }) => {
return <h1>{data}</h1>;
};

• In the example above, Parent passes the message as a prop to Child.
• In Child, the data is accessed via props.data.

✅ 2️⃣ Passing Data from Child to Parent (Callback Functions):

To pass data from a child to a parent, the parent provides a callback function (a function passed as a prop) to the child. The child can then call this function, passing the data as an argument.

Example:

// Parent Component
const Parent = () => {
const handleData = (childData) => {
console.log("Data from child:", childData);
};

return <Child sendData={handleData} />;
};

// Child Component
const Child = ({ sendData }) => {
const data = "This is data from child!";

return <button onClick={() => sendData(data)}>Send Data to Parent</button>;

};

• The Parent passes a handleData function to the Child component.
• When the button is clicked in Child, the sendData function (which is the handleData from the parent) is called, sending data back to the parent.

✅ 3️⃣ Passing Data Between Sibling Components (Lift State Up):

If two sibling components need to share data, you’ll lift the state up to their common parent. The parent will then pass the data to each child as props.

Example:

// Parent Component
const Parent = () => {
const [data, setData] = useState("Initial Data");

const updateData = (newData) => {
setData(newData);
};

return (
<>
<ChildA data={data} updateData={updateData} />
<ChildB data={data} />
</>
);
};

// ChildA (updates data)
const ChildA = ({ data, updateData }) => {
return (
<div>
<h1>{data}</h1>
<button onClick={() => updateData("Data from ChildA")}>Update Data</button>
</div>
);
};

// ChildB (displays data)
const ChildB = ({ data }) => {
return <h2>{data}</h2>;
};

• ChildA can update the state in the parent via the updateData function.
• The updated state is then passed to ChildB as a prop, and it renders the updated data.

✅ 4️⃣ Passing Data with Context API (Global Data Sharing):

For more complex applications, when you need to pass data deeply through many layers of components, React Context API is useful. It allows data to be shared globally, avoiding prop drilling.

Example:

// Context Setup
const DataContext = createContext();

// Parent Component (provides data)
const Parent = () => {
const data = "Data from Context!";

return (
<DataContext.Provider value={data}>
<Child />
</DataContext.Provider>
);
};

// Child Component (consumes data)
const Child = () => {
const data = useContext(DataContext);
return <h1>{data}</h1>;
};

• Parent provides data via DataContext.Provider.
• Child accesses that data using useContext(DataContext).

✅ 5️⃣ Passing Data with Redux (Global State Management):

For even more complex state management across many components, Redux can be used to store global application state. It provides a centralized store that can be accessed and modified by any component.

Example:

// Redux Store (simplified)
const initialState = { message: "Hello from Redux" };

const reducer = (state = initialState, action) => {
switch (action.type) {
case "UPDATE_MESSAGE":
return { ...state, message: action.payload };
default:
return state;
}
};

// Parent Component (connects to Redux store)
const Parent = () => {
const message = useSelector(state => state.message);
const dispatch = useDispatch();

const updateMessage = () => {
dispatch({ type: "UPDATE_MESSAGE", payload: "New message from Redux!" });
};

return (
<div>
<h1>{message}</h1>
<button onClick={updateMessage}>Update Message</button>
</div>
);
};

• The Redux store manages global state, and components can access and update this state using the useSelector and useDispatch hooks.

✅ 6️⃣ Passing Data via URL Parameters (Routing):

If you’re working with routing (e.g., with React Router), you can pass data between components through URL parameters.

Example:

// App.js (using React Router)
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

const App = () => (
<Router>
<Link to="/profile/123">Go to Profile</Link>

<Route path="/profile/:id" component={Profile} />
</Router>


);

// Profile Component (receives data via URL params)
const Profile = ({ match }) => {
const { id } = match.params; // id is passed through the URL
return <h1>Profile ID: {id}</h1>;
};

• The Profile component gets the id from the URL via match.params.

🔥 Summary of Methods to Pass Data Between Components:

• Parent to Child: Using props
• Child to Parent: Using callback functions
• Sibling to Sibling: By lifting state up to a common parent
• Global Data: Using Context API or Redux
• Routing Data: Via URL parameters