Pass state back to parent AND pass other props from parent to child in React

Question

I know how to pass the state from child to parent. And I know how to pass props from parent to child.

However, the obvious way for doing both at the same time doesn't seem to work as I expected. Please see an example below.

import React, { useState } from "react";

const Child = (props, { other }) => {
  // This is what I'd like to achieve but it ignores the {other} prop and doesn't received it from parent

  // const Child = ({ other }) => { // Works, but the sending of props from child to parent stops working
  // const Child = (props) => { // Works too but obviously the 'other' prop is not passed anymore
  return (
    <>
      Child
      <button onClick={() => props.setValue("New stuff")}>Click!</button>
      <p>{other}</p>
    </>
  );
};

const Parent = () => {
  const [value, setValue] = useState("Default value");

  return (
    <>
      Parent <Child setValue={setValue} other={"Something else"} />
      <p>{value}</p>
    </>
  );
};

export default Parent;

I tried passing both as {props, other}, (props, other), ({props, {other}}) but nothing worked.

Here is a link to Codesandbox.

score 0 · Answer 1 · answered Feb 04 '22 at 01:58

0

Use const Child = ({other, ...props }) => {

CodeSandbox : https://codesandbox.io/s/romantic-gagarin-3cgto

answered Feb 04 '22 at 01:58

BENARD Patrick

30,363
16
99
105

score 0 · Answer 2 · answered Feb 04 '22 at 01:58

The props parameter in this case actually contains both of the setValue and other props.

The destructuring syntax is also helpful for legibility here.

import React, { useState } from "react";

const Child = (props) => {
  // destructure both setValue and other out of props
  const {setValue, other} = props
  return (
    <>
      Child
      <button onClick={() => setValue("New stuff")}>Click!</button>
      <p>{other}</p>
    </>
  );
};

const Parent = () => {
  const [value, setValue] = useState("Default value");

  return (
    <>
      Parent <Child setValue={setValue} other={"Something else"} />
      <p>{value}</p>
    </>
  );
};

export default Parent;

Thank you! Your suggested solution is working great too, but I had to choose one and I went with @2pichar answer, since I can avoid writing an extra line. — Smlok, Feb 04 '22 at 02:19

score 0 · Accepted Answer · answered Feb 04 '22 at 01:59

You can access other from props:

import React, { useState } from "react";

const Child = (props) => {
  return (
    <>
      Child
      <button onClick={() => props.setValue("New stuff")}>Click!</button>
      <p>{props.other}</p>
    </>
  );
};

const Parent = () => {
  const [value, setValue] = useState("Default value");

  return (
    <>
      Parent <Child setValue={setValue} other={"Something else"} />
      <p>{value}</p>
    </>
  );
};

export default Parent;

This is exactly what I was after, thank you! – Smlok Feb 04 '22 at 02:18 — Smlok, Feb 04 '22 at 02:18

Pass state back to parent AND pass other props from parent to child in React

3 Answers3