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 ponent 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 ponents 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.

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 ponent 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 ponents 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.

• javascript
• reactjs
• material-ui

Share Improve this question Follow edited Feb 29, 2020 at 4:12 boojum asked Feb 29, 2020 at 4:03 boojumboojum 74122 gold badges1010 silver badges3131 bronze badges 3

• Are you sure that code is unique ? From the error it looks like, you are passing an object instead of string. – Utsav Patel Commented Feb 29, 2020 at 4:07
• Good point! I'm not sure about the uniqueness of the country code. I changed it to index, see my updated question. – boojum Commented Feb 29, 2020 at 4:13
• Although using index may work, but it is not remended. More on that here : reactjs/docs/lists-and-keys.html#keys – Utsav Patel Commented Feb 29, 2020 at 4:25

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

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;

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

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

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.