Downshift Boostrap

dsDropdown.js

import React from 'react'
import Downshift from 'downshift'

export default class Dropdown extends React.Component {
  render() {
    const { children, onChange } = this.props

    return (
      <Downshift onChange={onChange}>
        {({
          getInputProps,
          getButtonProps,
          getItemProps,
          isOpen,
          inputValue,
          selectedItem,
          highlightedIndex
        }) => (
          <div className="dropdown">
            <button
              className="btn btn-secondary dropdown-toggle"
              type="button"
              aria-haspopup="true"
              aria-expanded={isOpen}
              id="dropdownMenuLink"
              {...getButtonProps()}
            >
              Dropdown button
            </button>
            {isOpen ? (
              <div className="dropdown-menu show" aria-labelledby="dropdownMenuLink">
                {React.Children.map(children, (child, index) => {
                  const { props: childProps } = child
                  const item = childProps.value
                  return (
                    React.cloneElement(child, {
                      ...getItemProps({
                        key: item,
                        isFocused: highlightedIndex === index,
                        index,
                        item,
                      }),
                    })
                  )
                })}
              </div>
            ) : null}
          </div>
        )}
      </Downshift>
    )
  }
}