<select> in React

This is an example of a controlled <select> implementation in React using the JSX syntax:

import React from 'react';

type Value = any

type SelectProps = {
    options: {
        label: string
        value: Value
    }[]
    value: Value
    onChange: (value: Value) => void
}

const Select = ({ options, value, onChange }: SelectProps) => (
    <select
        onChange={(event: React.ChangeEvent<HTMLSelectElement>) => {
            const selectedIndex = event.target.selectedIndex
            onChange(options[selectedIndex].value)
        }}
        value={value}
    >
        {options.map(({ label, value }) => (
            <option key={value} value={value}>{label}</option>
        ))}
    </select>
)

If the Value type is string, the onChange prop passed to <select> can be simplified:

type SelectProps = {
    options: {
        label: string
        value: string
    }[]
    value: string
    onChange: (value: string) => void
}

const Select = ({ options, value, onChange }: SelectProps) => (
    <select
        onChange={(event: React.ChangeEvent<HTMLSelectElement>) => onChange(event.target.value)}
        value={value}
    >
        {options.map(({ label, value }) => (
            <option key={value} value={value}>{label}</option>
        ))}
    </select>
)