How to pass optional elements to a component as a prop in reactjs

you can do something like this

render(){
    <div>
        {this.props.title ? this.props.title : null}
        {this.props.children}
    </div>
}

basically if you pass a title element as a prop then create it as an element and render it. else just put in null...

to create it you would do something like this.

<Panel title={<Title>Something Here</Title>}
    <div> something here</div>
</Panel>

This is generally how react should handle optional child components

You don't need to do anything special. Just pass the title component as a prop, and then use {this.props.title} wherever you want it to be rendered:

class Panel extends React.Component {
  render() {
    return <div>
      {this.props.title}
      <div>Some other stuff...</div>
    </div>;
  }
}

class App extends React.Component {
  render() {
    var title = <Title>My Title</Title>;
    return <Panel title={title}/>;
  }
}

If you don't pass any value for the title prop (or if the value is false, null, or undefined) then nothing will be rendered there.

This is a fairly common pattern in React.