React props destructuring when passing to component

Question

Is there a way to use es6 shorthand when passing a props with the same name?

const [showNavMenu, setShowNavMenu] = useState(false)

So this:

<NavMenu showNavMenu={showNavMenu} setShowNavMenu={setShowNavMenu} />

Will became this:

<NavMenu {showNavMenu} {setShowNavMenu} />

Answer 1

you could always use the spread operator, which is my favorite way to pass props to a component

propsToPassthrough = {showNavMenu, setShowNavMenu}

then

<NavMenu {...propsToPassthrough}>

Answer 2

If you don't want to use an extra variable, you can do this:

<NavMenu {...{showNavMenu, setShowNavMenu}} />