Search code examples
reactjsreact-props

Passing Props with spread operator when using destructuring

I have a child component C that I want to pass with all props using the spread operator into parent component A via child component B. How do I achieve that when making use of the destructure technique?

const C = ({onClick}) => (
  <El onClick={onClick} />
)

// What do I need to pass through here?
// I tried ({someProps, ...props}) or ({someProps}, props) and multiple other variants but none worked
const B = ({someProps}) => (
  <>
    <OtherComponent someProps={someProps} />
    <C {...props} />
  </>
)

const A = () => {
  const handleOnClick = () => {
    setSomeState(!someState)
  }
  return (
    <>
     <B onClick={handleOnClick} />
    </>
  )
}
Solution

  • Ok, just keeping this here if someone else is running into the same issue.

    It is really just using ({someProps, ...props}) inside your middle component. I swear I've tried it multiple times but it only worked after asking in here.