Problem with using map to populate select in React / Material UI

user_4221522 0
Viewed 7231

I'm trying to populate Material's UI with a list of countries, like so:

import React from "react";
import FormControl from "@material-ui/core/FormControl";
import InputLabel from "@material-ui/core/InputLabel";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";
import countries from "./data";

const simpleCountrySelect = props => {
  return (
    <>
      <FormControl>
        <InputLabel id="countrySelectLabel">Country</InputLabel>
        <Select labelId="countrySelectLabel" id="countrySelect" value=''>
          {countries.map((code, name, index) => (
            <MenuItem key={index} value={code}>
              {name}
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </>
  );
};

export default simpleCountrySelect;

Uncontrolled component for the brevity sake. But I'm getting the following error:

Encountered two children with the same key, `.$.$.$[object Object]`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

Here is sample of the data.js file:

export default [
  { code: "AD", name: "Andorra" },
  { code: "AE", name: "United Arab Emirates" },
  { code: "AF", name: "Afghanistan" },
  { code: "AG", name: "Antigua and Barbuda" }
];

What am I doing wrong here?

EDIT: changed key from code to index, still nothing.

material-ui reactjs javascript
3 Answers

Encountered two children with the same key is a warning which says two of your menu item has the same key, since your using country code as the key, it might as well be true. I would suggest something like an index of your array to be used as a key. Secondly you got to return in a map. So it should be something like 

countries.map((index, code, name) => {
return(
<Menu.Item key={index} value={code}>
   {name}
</Menu.Item>
)})

Try this, it should be good to go.

user_83249100

It seems that you meant to destructure each object in the array but you've missed the curly braces:

countries.map(({code, name}) =>
user_128268020

It is acturally map method used mistake.

The parameters transfer to the function in map are present item, index, array in order. In your case, countries.map((code, name, index) => {...}), code present single item in data array, such as {code: "AD", name: "Andorra"}, name present index of data array, index present data array itself. You got the same key error is because they are the same value - the data array.

So, the right way to write map function in your purpose should be as below:

countries.map(({ code, name }, index) => (
  <MenuItem key={index} value={code}>
    {name}
  </MenuItem>
))

The whole file should be as below:

import React from "react";
import FormControl from "@material-ui/core/FormControl";
import InputLabel from "@material-ui/core/InputLabel";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";
import countries from "./data";

const simpleCountrySelect = props => {
  return (
    <>
      <FormControl>
        <InputLabel id="countrySelectLabel">Country</InputLabel>
        <Select labelId="countrySelectLabel" id="countrySelect" value=''>
          {countries.map(({code, name}, index) => (
            <MenuItem key={index} value={code}>
              {name}
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </>
  );
};

export default simpleCountrySelect;
user_61908870
Related