Pass a Component as a Child Prop and Render it – ReactJs

Hi everyone,

A quick post on how to pass a component as a prop and then render it as a child.

const ChildComponent = () => <div>Child Component</div>;
const MainComponent = (props) => <div><div>Main component. Child appears below</div>{props.content}</div>;
class App extends React.Component {
  render () {                                        
    return (
          <MainComponent content={<ChildComponent />} />          

An alternative to all of this that I wasn’t aware of is to to use “children”:

See the Pen ozqNOV by Dan Abramov (@gaearon) on CodePen.

Thanks to the following stackoverflow post for the info:

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.