How to pass props to children with functional components?-CodePudding

I'm having a trouble with passing props to children in functional react. My {children} is a Details component like below:

<SidebarPage>
   {children}
</SidebarPage>

const Details = () => {}

how can I pass props in way that, I put props to {children} and I receive this props in Details component? Is this even workable?

Thanks for any help!

CodePudding user response：

You can pass component as prop, something like -

const SidebarPage = ({ChildComponent}) => {
  const props = { name: "X" };

  return <ChildComponent {...props} />
}

const Details = (props) => {}

<SidebarPage ChildComponent={Details} />

CodePudding user response：

You could use cloneElement to add new props to a component children

const newProps = {aProp: "aProp"} ;

return (
<SidebarPage>
   {React.Children.map(props.children, child => {
     return React.cloneElement(child, {
       newProps,
    }, null)
   }
</SidebarPage>
)