How do you create component objects in React?

Question

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.

The beauty of JS is that everything is open source. You can read their code. If you are using it in a repo, you can navigate to the folder in node_modules. If not, you can check debug version as well: cdnjs.cloudflare.com/ajax/libs/react-bootstrap/2.5.0/… — Rajesh Dixit
– Rajesh Dixit, Commented Sep 23, 2022 at 7:29

Johnny Missile · Accepted Answer · 2022-09-23 08:37:22Z

2

Like this:

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

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

export default Modal

And now you can use <Modal.Body />

answered Sep 23, 2022 at 8:37

Johnny Missile

2923 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

WillWillington Over a year ago

Is this considered bad practice? It seems sort of odd storing the sub-components in the function object itself

Johnny Missile Over a year ago

If you dont abuse it and it does make sense that's not a bad practice. Functions in Js are objects like any other, so feel free to use that as your advantage.

WillWillington Over a year ago

Well, thank you then for the insight! This has helped a lot

Collectives™ on Stack Overflow

How do you create component objects in React?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related