In React, components often need to share information. To do this, we use parent/child relationships and sometimes need to “lift state” so components can communicate effectively. Here’s a simple guide to get you started.
Summary
- Parent-to-Child Communication: Pass data using props.
- Child-to-Parent Communication: Use functions passed as props to update the parent’s state.
- Lifting State: Move state to the nearest common parent to share it between sibling components.
1. Parent and Child Components
Think of a parent component and child components quite literally as a parent and their children. The parent manages the house and passes chores down to the children.
Let’s create two components: Parent and Child. The parent will pass data to the child using props.
Parent Component:
import React from 'react';
import Child from './Child';
function Parent() {
const message = "Hello from Parent!";
return (
<div>
<h1>Parent Component</h1>
<Child message={message} />
</div>
);
};
export default Parent;
What do you think is the prop we will pass down to the Child?
Child Component:
import React from 'react';
function Child({ message }) {
return (
<div>
<h2>Child Component</h2>
<p>{message}</p>
</div>
);
};
export default Child;
When you render Parent, the child will display:
Hello from Parent!
2. Lifting State Up
Sometimes, a child component needs to send data back to its parent. This is where we “lift state.”
Here’s an example where the child sends a message to the parent:
Parent Component:
import React, { useState } from 'react';
import Child from './Child';
function Parent() {
const [childMessage, setChildMessage] = useState("");
const handleMessage = (message) => {
setChildMessage(message);
};
return (
<div>
<h1>Parent Component</h1>
<p>Message from Child: {childMessage}</p>
<Child onSendMessage={handleMessage} />
</div>
);
};
export default Parent;
Child Component:
What props do you think we will be passing down to the Child function?
import React from 'react';
function Child({ onSendMessage }) {
const sendMessageToParent = () => {
onSendMessage("Hello from Child!");
};
return (
<div>
<h2>Child Component</h2>
<button onClick={sendMessageToParent}>Send Message to Parent</button>
</div>
);
};
export default Child;
Now, when you click the button in the child component, the parent updates its state and displays:
Message from Child: Hello from Child!
3. Why Lift State?
- If two child components need to share data, the parent can manage the state and pass it to both children.
- It avoids redundant state logic across components.
Example: Sibling Communication
import React, { useState } from 'react';
import ChildOne from './ChildOne';
import ChildTwo from './ChildTwo';
function Parent () {
const [sharedState, setSharedState] = useState("");
return (
<div>
<h1>Parent Component</h1>
<ChildOne setSharedState={setSharedState} />
<ChildTwo sharedState={sharedState} />
</div>
);
};
export default Parent;
ChildOne Component:
import React from 'react';
function ChildOne ({ setSharedState }) {
return (
<div>
<h2>Child One</h2>
<button onClick={() => setSharedState("Message from Child One")}>
Send to Child Two
</button>
</div>
);
};
export default ChildOne;
ChildTwo Component:
import React from 'react';
function ChildTwo ({ sharedState }) {
return (
<div>
<h2>Child Two</h2>
<p>{sharedState}</p>
</div>
);
};
export default ChildTwo;
When ChildOne sends a message, ChildTwo automatically receives it via the parent.
Top comments (0)