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!
You can pass component as prop, something like -
const SidebarPage = ({ChildComponent}) => {
const props = { name: "X" };
return <ChildComponent {...props} />
}
const Details = (props) => {}
<SidebarPage ChildComponent={Details} />
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>
)