What Is The Best Way To Select Option When Option Is An Object?

What is the best way to select option when option is an object?

During changing selected value I need to get selected option object

example https://codesandbox.io/s/st-of-select-object-ssib9

function App() {
  const [value, setValue] = useState(options[0]);

  return (
    <select
      value={value}
      onChange={event => {
        setValue(event.target.value);
      }}
    >
      {options.map(option => {
        return <option value={option}>{option.label}</option>;
      })}
    </select>
  );
}

I think you want the state to be an object and not the select's value, if so then try the following:

const [option, setOption] = useState(options[0]);

function handleChange(event) {
    const { value } = event.target;
    const option = options.find(o => o.value === parseInt(value, 10));
    if(option)
      setOption(option); // object
}

...

<select
  value={option.value}
  onChange={handleChange}
>
      {options.map(option => <option key={option.value} value={option.value}>{option.label}</option>)}
</select>

Demo: