toggle-opened.jsx

class ToggleOpened extends Component {
  state = { opened: false }
  
  toggle = () =>
    this.setState(state => ({ opened: !state.opened }))

  render() {
    return this.props.render({
      opened: this.state.opened,
      toggle: this.toggle,
    })
  }
}

const Dropdown = ({ label, items }) => (
  <ToggleOpened render={({ opened, toggle }) => (
    <Wrapper>
      <Button onClick={toggle}>{label}</Button>
      {opened && (
        <FloatingDiv>
          {items.map(item => (
            <DropdownItem {...item} key={item.name} />
          ))}
        </FloatingDiv>
      )}
    </Wrapper>
  )} />
)

const Popover = ({ tip, children }) => (
  <ToggleOpened render={({ opened, toggle }) => (
    <Wrapper>
      <div onClick={toggle}>{children}</div>
      {opened && <FloatingDiv>{tip}</FloatingDiv>}
    </Wrapper>
  )} />
)