How to use react children to create element like

Question

how I can use React component to write code like this :

<Modal>
<Modal.Title>test title <Modal.Title>
<Modal.Body>

...body
</Modal.Body>
</Modal>

Answer 1

Set the sub-components (Title, Body) as static members of the main component (Modal):

class Modal extends React.Component {
  static Title = ({ children }) => <h2>{children}</h2>;
  static Body = ({ children }) => <section>{children}</section>;

  render() {
    return (
      <div>
        {this.props.children}
      </div>
    );
  }
}

ReactDOM.render(
  (<Modal>
    <Modal.Title>test title </Modal.Title>
      <Modal.Body>

        ...body
    </Modal.Body>
  </Modal>),
  document.getElementById('demo')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="demo"></div>