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

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.

CodePudding user response：

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;

CodePudding user response：

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

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

CodePudding user response：

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;