Select.tsx

type BaseProps<IdType> = {
  options: Array<{id: IdType; name: string}>;
};
  
type PropsWhenOptional<IdType> = BaseProps<IdType> & {
  required?: false;
  selectedItemId?: IdType | null;
  onSelect: (id: IdType | null) => void;
};
  
type PropsWhenRequired<IdType> = BaseProps<IdType> & {
  required: true;
  selectedItemId?: IdType;
  onSelect: (id: IdType) => void;
};
  
const Select = <IdType extends string>(
  props: PropsWhenOptional<IdType> | PropsWhenRequired<IdType>,
) => (
  <select
    value={props.selectedItemId ?? 'NULL_SELECTION'}
    required={props.required}
    onChange={e => {
      const value = e.target.value as IdType;
      if (!props.required) {
        const selectedId = !props.required && e.target.value === 'NULL_SELECTION' ? null : value;
        props.onSelect(selectedId);
      } else {
        props.onSelect(value);
      }
    }}
  >
    {!props.required && <option value="NULL_SELECTION">None selected</option>}
    
    {props.options.map(option => (
      <option key={option.id} value={option.id}>
        {option.name}
      </option>
    ))}
  </select>
);