Question 305882 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to use setState in a child component in React?

I started learning React recently and I read in their docs that if you want to share a state between component B and C, you need to lift the state to their nearest parent component A.

I started working on something where my component structure looks like this:

Component A

|

Component B

|

|–Component B.child

|

Component C

|

|–Component C.child

In this case, I want both Component B.child and Component C.child to share a state (let’s call it [summary, setSummary]) so what I did was lift the state to Component A which is their nearest parent.

This works and I can pass {summary} to both intended Components properly.

My question is, is there any way that I can use {setSummary} inside Component B.child and Component C.child? If so, how?

The examples I see in their docs the {setState} is being used in the parent component itself not in the children components.

I tried passing it as a prop but it didn’t work (maybe I didn’t do it properly)

This is a summary of my code:

App.jsx:

import { useState } from "react";
import Left from "./components/Left";
import Right from "./components/Right";

function App() {
  const [summary, setSummary] = useState("InitialSummary");

  return (
    <div className="content">
      <Left
        summary={summary}
        setSummary={setSummary}
      ></Left>
      <Right
        summary={summary}
      ></Right>
    </div>
  );
}

Left.jsx:

import Summary from "./Summary";

export default function Left({
  summary,
  setSummary,
}) {
  return (
    <div className="left">
      <Summary
        existingInfo={summary}
        setExistingInfo={setSummary}
      ></Summary>
    </div>
  );
}

Summary.jsx

export default function Summary({ existingInfo, setExistingInfo }) {
  const setSummaryToHey = () => {
    setExistingInfo("hey");
  };
  return (
    <form action="#" method="post" className="editSummaryBox">
      <label htmlFor="summaryInput">Summary</label>
      <textarea
        id="summaryInput"
        value={existingInfo}
        onClick={setSummaryToHey}
      ></textarea>
      <button type="submit" className="submitButton">
        Submit
      </button>
    </form>
  );
}

On clicking the textarea, the value of the textarea doesn’t change to "hey"

Tags:

2

Answers


  1. 0

    You can pass setSummary as a prop to the child components just like you pass summary.
    But, I usually use Context instead of prop drilling whenever I have to pass the state deep in the render tree.

    import React, { useState } from "react";

function ComponentA() {
  const [summary, setSummary] = useState("Initial");

  return (
    <div>
      <ComponentB setSummary={setSummary} />
      <ComponentC setSummary={setSummary} />
      <p>Summary: {summary}</p>
    </div>
  );
}

function ComponentB({ setSummary }) {
  return (
    <div>
      <ComponentBchild setSummary={setSummary} />
    </div>
  );
}

function ComponentBchild({ setSummary }) {
  const handleClick = () => {
    setSummary("ComponentBchild");
  };

  return <button onClick={handleClick}>ComponentBchild</button>;
}

function ComponentC({ setSummary }) {
  return (
    <div>
      <ComponentCchild setSummary={setSummary} />
    </div>
  );
}

function ComponentCchild({ setSummary }) {
  const handleClick = () => {
    setSummary("ComponentCchild");
  };

  return <button onClick={handleClick}>ComponentCchild</button>;
}

export default ComponentA;

    If you wanna play with code.

    Login or Signup to reply.
  2. 0

    yes you can do this by passing your setState as a prop to child component .
    but I suggest that use context or another state management if you need pass your state in multiple components .

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search