Sorry if the title is confusing, but basically I have a react component that renders a select dropdown with a bunch of options. I want to display the options in the dropdown normally, but once selected, I want the selected value to be something else compared to its label.

It’s easier to understand when mapping through an array called options which creates the options:

<select value={value}>
    {options.map(({ name, value }, i) => (
        <option key={i} value={value}>
            {name}
        </option>
    ))}
</select>

Here I want the option in the dropdown to be displayed with the name, but once selected, it should be displayed as the value which will be different. If that makes sense. I’ve seen some similar questions, but none that involved react but using standard html so all the js was jquery.