Example of how to use Downshift as a controlled component with arbitrary items

downshift-example.js

// Untested code, but hopefully it gives you an idea.
// Ping me @jofarnold on Twitter if you get stuck

import React, { Component } from "react";
import Downshift from "downshift";
import PropTypes from "prop-types";

function nodeFromItem(id, items) {
  return items.find(({ uuid }) => uuid === id);
}

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

  render() {
    const { prompt, items, ...rest } = this.props;
    return (
      <Downshift {...rest}>
        {({
          getButtonProps,
          getItemProps,
          isOpen,
          toggleMenu,
          selectedItem: selectedUuid,
        }) => {
          return (
            <span>
              <button
                {...getButtonProps()}
                onClick={toggleMenu}
                ...etc
              >
                {selectedUuid === null
                  ? prompt
                  : nodeFromItem(selectedUuid, items)}
              </button>
              {isOpen ? (
                <span>
                  {items.map(({ uuid, node }) => (
                    <button
                      getItemProps={getItemProps}
                      key={uuid}
                      node={node}
                      uuid={uuid}
                      ...etc
                    />
                  ))}
                </span>
              ) : null}
            </span>
          );
        }}
      </Downshift>
    );
  }
}

// Your controlled dropdown.
// Takes `true` or `false` and outputs "Yes" or "No"
const TrueFalseDropdown = ({ value, onChange }) => {
  const items = [{ uuid: "yes", node: <span>Yes!<span> }, { uuid: "no", node: <span>No</span> }];

  return (
    <Dropdown
      items={items}
      onChange={v => onChange(v === "yes")}
      prompt="Are you feeling groovy?"
      selectedItem={value === true ? "yes" : "no"}
    />
  );
};
                 
TrueFalseDropdown.propTypes = {
  value: PropTypes.bool,
  onChange: PropTypes.func,
}