TypeScript - Generics

typescript-generics.tsx

import React from "react";
import { Select, MenuItem, FormControl, InputLabel, Box } from "@mui/material";

interface MovieFilterProps<T extends string | number> {
  primaryOptionLabel?: string;
  primaryOptionValue?: T;
  options: T[];
  selectedFilter: T;
  setSelectedFilter: React.Dispatch<React.SetStateAction<T>>;
  title: string;
}

const MovieFilter = <T extends string | number>({
  primaryOptionLabel,
  primaryOptionValue,
  options,
  selectedFilter,
  setSelectedFilter,
  title,
}: MovieFilterProps<T>) => {
  const getSuffixCharacter = (optionValue: T) =>
    typeof optionValue === "number" && optionValue < 10 && optionValue > 0
      ? "+"
      : "";

  return (
    <Box>
      <FormControl variant="outlined">
        <InputLabel>{title}</InputLabel>
        <Select
          value={selectedFilter}
          onChange={(e) => setSelectedFilter(e.target.value as T)}
          label={title}
        >
          <MenuItem value={primaryOptionValue}>{primaryOptionLabel}</MenuItem>

          {options.map((optionValue, index) => (
            <MenuItem value={optionValue} key={`${index}_${optionValue}`}>
              {optionValue}
              {getSuffixCharacter(optionValue)}
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </Box>
  );
};

export default MovieFilter;