How to create Dropdown component depending on another components in React JS?

Question

I would like to create a Dropdown component : <Dropdown />.

In this Dropdown, I would like a handler and a content to show. Always 2 elements inside this Dropdown.

This handler can be anything: Simple HTML, String or Component.

This content to show can be anything: Simple HTML, String or Component.

How can I a structure this Dropdown ? I would like to reuse it anywhere in my app.

I have this in mind.

<div id="Page2">
  <Dropdown>
    <Avatar />
    <Menu>
       <li>Settings</li>
       <li>Logout</li>
    </Menu>
  </Dropdown>
</div>

But it could be this :

<div id="Page3">
  <Dropdown>
    <span>Click to show the content</span>
    <div>Hello World</div>
  </Dropdown>
</div>

Component :

class Dropdown extends React.Component {
   constructor(props) {
       super(props);
   }
}

How can make Avatar or <span>Click to show the content</span> as handler?

I ask because it seems that Dropdown component have dynamic content but the operation is the same.

Thanks

squgeim · Accepted Answer · 2017-02-21 15:29:45Z

1

If I understand you correctly, you are looking for props.children. This is used to pass the children elements of a component to the component.

For example:

<DialogBox>
  <div>Title</div>
</DialogBox>

In the DialogBox component's render method:

return (
  <div class="dialog-box">
    {this.props.children}
  </div>
);

This will render:

<div class="dialog-box">
  <div>Title</div>
</div>

answered Feb 21, 2017 at 15:29

squgeim

2,3611 gold badge15 silver badges21 bronze badges

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

1 Answer 1