Compose a component in ReactJs

Question

I saw that some libraries like Ant Design have components that look like this:

<Form.Item></Form.Item>

As we can see, the component above is created like a object, using . -> Form.Item.

Can someone give a simple example of how to create components like this? I don't understand how they are created. I understand when I create a <Nav/> component, but not how to create a component what will be extended with a ., like <Nav.Home/> or <Nav.Common/>. Thanks.

Does this answer your question? In ReactJs, How do I create subcomponent using extends — Abhishek Bhagate
– Abhishek Bhagate, Commented Sep 5, 2020 at 17:53

Lionel Rowe · Accepted Answer · 2020-09-05 17:54:41Z

3

A React <JSX /> component just compiles to plain JavaScript. So you can create them as properties of an object just like you could with any other JavaScript value.

const Components = {
  Friend: ({name}) => <div>I am your friend {name}</div>,
}

export default function App() {
  return (
    <div className="App">
      <Components.Friend name="Jimmy" />
    </div>
  )
}

answered Sep 5, 2020 at 17:54

Lionel Rowe

6,2581 gold badge19 silver badges35 bronze badges

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

Collectives™ on Stack Overflow

Compose a component in ReactJs

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related