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

Question

I am trying to figure out the proper "react" way to pass in an optional prop that is an Element to a container component, that is handled differently from the children of that component.

For a simple example, I have a Panel component, which renders its children, that also has an optional "title" prop (which is an element rather than a string, for the sake of the example) that gets specially rendered (put in a special spot, with special behaviors in while maintaining the abstraction.

One option is to have a component which is pulled out of the children and rendered specially:

<Panel>
   <Title> some stuff</Title>
   <div> some other stuff</div>
</Panel>

But it seems wierd to have the children pulled out and handled separately like that.

How is this normally handled in react, and am I even thinking about this the right way

Answer 1

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.