React react-select / Each child in a list should have a unique "key" prop

February 1, 2023

I use react-select
I get nex warning from react
Warning: Each child in a list should have a unique "key" prop.

My component:

import React from "react";
import Select from "react-select";

import styles from "./Filter.module.scss";

interface SearchBarProps {
  setParametr: React.Dispatch<React.SetStateAction<string>>;
  data: Array<{ name: string; value: number }>;
  placeholder: string;
}

export const SearchBar: React.FC<SearchBarProps> = (props) => {
  // const [options, setOptions] = React.useState([]);

  const changeValue = (event: { name: string; value: number } | null) => {
    props.setParametr(event?.name || "");
  };

  return (
    <Select
      className={styles.input}
      placeholder={props.placeholder}
      onChange={(event) => changeValue(event)}
      getOptionLabel={(option) => {
        return option.name;
      }}
      getOptionValue={(option) => {
        return option.value.toString();
      }}
      options={props.data}
    />
  );
};

I think the problem is related to the dropdown list, but I don’t know how to set the key value for them

>Solution :

It looks like your data has some repeating value entries. The react-select library uses value as keys for the options, so they need to be unique.