Step-by-Step Guide: Parent/Child Components and Lifting State

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

1. Parent-to-Child Communication: Pass data using props.
2. Child-to-Parent Communication: Use functions passed as props to update the parent’s state.
3. 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.