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 (
      <div>          
          <MainComponent content={} />          
      </div>
    );
  }
}

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.

https://static.codepen.io/assets/embed/ei.js

Thanks to the following stackoverflow post for the info: https://stackoverflow.com/a/41499555/522859