Search code examples
reactjscomponents

How do you create component objects in React?

I was playing around with react-bootstrap components and saw that their modals are structured like this:

<Modal>
  <Modal.Header>
    ...
  </Modal.Header>
  <Modal.Body>
    ...
  </Modal.Body>
</Modal>

I'm just curious, how are they able to create a react component that also holds sub-components such as <Modal.Header>? I'm making a lot of custom components in my project and I would love to structure a few of my components like this.

Solution

  • Like this:

    const Modal = () => <div>Modal</div>

Modal.Body = () => <div>Body</div>

export default Modal

    And now you can use <Modal.Body />