Uncontrolled select element
Renders an uncontrolled <select>
element that uses a callback function to pass its value to the parent component.
- Use the the
selectedValue
prop as thedefaultValue
of the<select>
element to set its initial value.. - Use the
onChange
event to fire theonValueChange
callback and send the new value to the parent. - Use
Array.prototype.map()
on thevalues
array to create an<option>
element for each passed value. - Each item in
values
must be a 2-element array, where the first element is thevalue
of the item and the second one is the displayed text for it.
const Select = ({ values, onValueChange, selectedValue, ...rest }) => { return ( <select defaultValue={selectedValue} onChange={({ target: { value } }) => onValueChange(value)} {...rest} > {values.map(([value, text]) => ( <option key={value} value={value}> {text} </option> ))} </select> ); }; const choices = [ ['grapefruit', 'Grapefruit'], ['lime', 'Lime'], ['coconut', 'Coconut'], ['mango', 'Mango'], ]; ReactDOM.createRoot(document.getElementById('root')).render( <Select values={choices} selectedValue="lime" onValueChange={val => console.log(val)} /> );