Answers
- The generic type must be defined in the component function as well as the prop:
export function Select<TOption>({
options,
value,
label,
}: Props<TOption>) {
return ...
}
- The
keyof
operator can be used to ensurevalue
andlabel
are keys inoptions
:type Props<TOption> = {
options: TOption[];
value: keyof TOption;
label: keyof TOption;
};
- The consumer is likely to need the data for the option, so the prop should be a function containing the data as a parameter:
type Props<TOption> = {
...,
renderOption: (option: TOption) => ReactNode;
};
export function Select<TOption>({
options,
value,
label,
renderOption,
}: Props<TOption>) {
return (
<div>
<input />
{options.map((option) =>...