Improving docs/examples for simple "dropdown select" component

I’m new to Downshift and really impressed with what I’ve seen so far! I just want to provide some feedback regarding one aspect I’m struggling with - implementing a simple “dropdown select” component (similar to HTML “select” element) where the items are not just strings, but instead “key/value” pairs.

I’m finding that most examples use a string array for their items and also they usually start with an empty default value, allowing the user to type into the input and show suggestions in the dropdown menu. I don’t want any input at all. Instead, I want a list of item objects that represent key/value pairs (such as “id” and “label” for example), then I want to be able to set the selectedItem using a string prop that specifies the “item id” only.

When I came to Downshift for the first time, what I was hoping to find was a simple example that demonstrates how to implement the following component in Downshift:

const items = [{ id: 'one', label: 'Item 1' }, { id: 'two', label: 'Item 2' }];
<Select selectedItem='two' items={items}/> 

The requirements being:

1. Item 2 is selected by default.
2. items is an array of objects rather than strings.
3. The selectedItem prop is a string representing the select item as the “id” attribute in the items array.

I’ve been trying to implement this off and on for a few days now but all my attempts so far feel a bit to hacky for my liking and I think I’m missing something fundamental about how Downshift works. I can’t seem to figure out the right way to have a selectedItem representing the “id” in the items object, if that makes sense?

[alexandernanberg]

I usually solve this by doing something like this: https://codesandbox.io/s/xpwovvx5vz

The usage looks like this. The defaultValue or value have to match the value of one of the items in the options array.

<Select
  label="Select fruit"
  defaultValue="apple"
  options={[
    { value: "apple", label: "Apple" },
    { value: "orange", label: "Orange" }
  ]}
/>

When you need to use this in a form I usually use a native <select /> element and sync the selectedItem to it. I can provide an example of it if anyone is interested.

[mischa-s]

Are the work around’s suggested here still the best way to achieve this? Isn’t this a pretty common use case to need to present the label to the user and then use the value only when submitting the form?