How to use the select component in controlled mode?

[vtrphan]

I don't see a value prop for the select component. How to use it in a controlled mode with React state?

[Orlando-Silva]

For the past hours I've been trying to figure it out by looking at the source code and it seems that the property name it's equivalent to Select's value property. In other words, if you use name as your value prop you will be able to use your component in a controlled manner.

Here's how I've managed it.

const options = [
    { "title": "China", "value": 52 },
    { "title": "South Africa", "value": 86 },
    { "title": "Italy", "value": 26 }
]

const [selectValue, setSelectValue] = useState("")

<Insect
  type="select"
  options={options}
  onSelect={(value) => setSelectValue(value) }
  name={selectValue}
/>

I've also highly recommend you to use the defaultOption property as it seems that if you just run the code above, when you first set a value, the setter doesn't properly register it but on a second try (and on subsequent tries) it properly does so.