Picker.tsx

import { Field } from "formik";
import Label from "./Label";
import PlaceholderOption from "./PlaceholderOption";

type PickerProps<K> = {
  placeHolder: string;
  nameInForm: string;
  label: string;
  data?: K[];
  mapper: (item: K) => PickerOption;
};

type PickerOption = { id: string | number; name: string };

const Picker = <K,>({
  placeHolder,
  label,
  nameInForm,
  data,
  mapper,
}: PickerProps<K>) => {
  return (
    <div className="flex w-full flex-col">
      <Label htmlFor={nameInForm}>{label}</Label>
      <Field
        className="w-full text-pink-500"
        as="select"
        name={nameInForm}
        id={nameInForm}
      >
        {[<PlaceholderOption key={0} text={placeHolder} />].concat(
          data?.map((raw) => {
            const item = mapper(raw);
            return (
              <option key={item.id} value={item.id}>
                {item.name}
              </option>
            );
          }) ?? []
        )}
      </Field>
    </div>
  );
};

export default Picker;