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.
Use const Child = ({other, ...props }) => {
CodeSandbox : https://codesandbox.io/s/romantic-gagarin-3cgto
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;
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;