30-seconds-of-code/snippets/Select.md

Select

Renders a <select> element that uses a callback function to pass its value to the parent component.

Use object destructuring to set defaults for certain attributes of the <select> element. Render a <select> element with the appropriate attributes and use the callback function in the onChange event to pass the value of the textarea to the parent. Use the values array to pass an array of [value, text] elements and the selected attribute to define the initial value of the <select> element.

function Select ({ values, callback, disabled = false, readonly = false, selected }) {
  return (
    <select 
      disabled={disabled} 
      readOnly={readonly} 
      onChange={(event) => callback(event.target.value)} 
    >
      {values.map(v => <option selected={selected === v[0]}value={v[0]}>{v[1]}</option>)}
    </select>
  );
}

let choices = [
  ['grapefruit', 'Grapefruit'],
  ['lime', 'Lime'],
  ['coconut', 'Coconut'],
  ['mango', 'Mango']
];
ReactDOM.render(
  <Select values={choices} selected='lime' callback={(val) => console.log(val)}/>,
  document.getElementById('root')
);