Lets say I have a wrapper component:
// wrapper that renders component passed as a prop
const Component = (childrenComponent) => <div>{childrenComponent}</div>
What I'd like to do is to invoke Component within some page, like:
import React from 'react'
const Page = () => {
const ChildrenComponent = () => <div>Children Component</div>
return <Component childrenComponent={ChildrenComponent} />
}
This will work well. My question is, given that prop names should be lowerCase, how can I change wrapper component code to be able to invoke ChildrenComponent in a JSX way (, instead of inline {childrenComponent}, while satisfying the requirement to name react components in PascalCase:
// this will not work
const Component = (childrenComponent) => <div><childrenComponent /></div>
// this will work but the prop name isn't camelCase
const Component = (ChildrenComponent) => <div><ChildrenComponent /></div>
You can setup Component like this:
const Component = props => {
return (
<div>{props.children}</div>
)
}
Using Component:
<Component>
<ChildrenComponent/>
</Component>
More reading material from the docs
You can use cloneElement as follows:
const Component = (children, ...props) => {
const clonedChild = cloneElement(children(), props)
return <>{clonedChild}</>
}
You need to wrap the returning result into a fragment.