CODEWITHSUNDEEP
javascriptreactjsmaps
Shivam Singh
Shivam Singh

Reputation: 31

Each child in a list should have a unique "key" prop. Warning

I have given unique key to every item but it still shows Each child in a list should have a unique "key" prop.

<FormControl className="registerInputs">
  <InputLabel htmlFor="name-multiple">Country</InputLabel>
  <Select
    value={country}
    placeholder="Country"
    input={<Input id="name-multiple" />}
    onChange={(e) => selectCountryHandler(e.target.value)}
  >
    {!!countryArr?.length &&
      countryArr.map(({ label, value }) => (
        <MenuItem key={label} value={value}>
          {label}
        </MenuItem>
      ))}
  </Select>
</FormControl>;

Upvotes: 0

Views: 114

Answers (1)

Tarun Kumar Sao
Tarun Kumar Sao

Reputation: 134

As I can see in your code, you have allotted the label as a key. I wonder if there are more than one similar labels that are giving you an error. I would suggest you use

countryArr.map(({ label, value }, id) => (
            <MenuItem key={id} value={value}>
              {label}
            </MenuItem>
          ))

Please try this and do tell me if it is working or not.

Upvotes: 1

Related Questions