Skip to content

Instantly share code, notes, and snippets.

@davidgilbertson
Last active April 18, 2021 07:05
Show Gist options
  • Save davidgilbertson/d78b236a05d944b3a90dd5f64bf3ec94 to your computer and use it in GitHub Desktop.
Save davidgilbertson/d78b236a05d944b3a90dd5f64bf3ec94 to your computer and use it in GitHub Desktop.
type Nullable<IdType, RequiredType> = RequiredType extends true ? IdType : IdType | null;
type OptionProps<IdType> = React.ComponentProps<'option'> & {
value: IdType;
};
const Select = <IdType extends string, RequiredType extends boolean>(props: {
options: Array<OptionProps<IdType>>;
selectedItemId: Nullable<IdType, RequiredType>;
onSelect: (id: Nullable<IdType, RequiredType>) => void;
required?: RequiredType;
}) => (
<select
value={props.selectedItemId ?? 'NULL_SELECTION'}
required={props.required}
onChange={e => {
const selectedId = e.target.value === 'NULL_SELECTION' ? null : e.target.value;
props.onSelect(selectedId as Nullable<IdType, RequiredType>);
}}
>
{!props.required && <option value="NULL_SELECTION">None selected</option>}
{props.options.map(option => (
<option key={option.value} {...option} />
))}
</select>
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment