-1
<Navbar>
     <Navbar.Item><Navbar.Items>
</Navbar>

Here we can easily create a Navbar component. But how to create Navbar child element Navbar.Item in react.

Pramod Thapa
  • 7
  • 2
  • Wny you want to use it like Navebar.Item not NavbarItem? – moshfiqrony Jun 08 '21 at 06:23
  • I think the question is a duplicate. Does this answer your question: [How do I utilize dot notation when rendering components?](https://stackoverflow.com/questions/44916839/how-do-i-utilize-dot-notation-when-rendering-components) – Martin Jun 08 '21 at 06:49

1 Answers1

2

This is a pattern known as Compound Components.

You can simply assign another React component as a property of the first.

Example:

const NavBar = props => <div>....</div>;

const NavItem = props => <div>....</div>;

NavBar.Item = NavItem;

export default NavBar;

Here's a reference blog by Kent Dodds I found when I had first discovered Compound Components: https://kentcdodds.com/blog/compound-components-with-react-hooks

Drew Reese
  • 165,259
  • 14
  • 153
  • 181