React: How can I render a list without keys?

Question

I have this json and I was wondering if there is a way to render a list without having to specify a key.

Here's what I tried:

import * as data from "./file.json";

const nameComponent = props => {
  const names = data.locale.names

  return(
    names.map = name => {
      <Item>
        <IdName>{name.id}</IdName>
        <FirstName>{name.firstName}</FirstName>
        <LastName>{name.lastName}</LastName>
      </Item>
  )
}

I can also just add the keys but I'm getting the following error:

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

Why am I getting this error even if I specified the keys?

Like this:

return(
  names.map = name => {
    <Item key={name.id}>
      <IdName>{name.id}</IdName>
      <FirstName>{name.firstName}</FirstName>
      <LastName>{name.lastName}</LastName>
    </Item>
)

EDIT: I have tried the answers below, none of them worked.

The json looks like this:

"items": [
  {
    "id": 1,
    "firstName": "Alan",
    "lastName": "Smith"
  },
  {
    "id": 2,
    "firstName": "John",
    "lastName": "Something"
  }
]

Does this answer your question? [Understanding unique keys for array children in React.js](https://stackoverflow.com/questions/28329382/understanding-unique-keys-for-array-children-in-react-js) — Raekh Void, Feb 04 '20 at 11:11
I don't think you want to render without keys. They're used to help react perform better — evolutionxbox, Feb 04 '20 at 11:14
@Thomas I don't know about that, I have added the full code. Do you think this is a function? — Cathy Tandey, Feb 04 '20 at 11:26
I think, `name => {...}` is a function, and `names.map = name => {...}` is assigning the function to `names.map`. No execution in sight. and `return a=b` is identical to `a=b; return b;` So, returning the function. — Thomas, Feb 04 '20 at 11:29
Despite the question being closed as "duplicate", the problem was not in `key` (it was just a warning, not an error, after all), but in the `return` statement of `nameComponent` (and BTW your React components should be *PascalCased*, not *camelCased*). — mbojko, Feb 04 '20 at 12:08

Muhammad Haseeb · Answer 1 · 2020-02-04T11:23:11.200

0

Try this:

return(
      names.map( name => {
        <Item key={name.id + name}>
          <IdName>{name.id}</IdName>
          <FirstName>{name.firstName}</FirstName>
          <LastName>{name.lastName}</LastName>
        </Item>
    )}

edited Feb 04 '20 at 11:23

answered Feb 04 '20 at 11:12

Muhammad Haseeb

1,269
12
22

mbojko · Answer 2 · 2020-02-04T11:17:19.613

0

Your syntax doesn't look right. Try

return(
  names.map(name => (
    <Item key={name.id}>the rest of the template...
  )
)

edited Feb 04 '20 at 11:17

answered Feb 04 '20 at 11:15

mbojko

13,503
1
16
26

`i` is `undefined`, you meant `map((name,i) => ...)`, I believe – Yevhen Horbunkov Feb 04 '20 at 11:16
Ah right, I copied-pasted the wrong line. – mbojko Feb 04 '20 at 11:17
I'm still getting the same error, perhaps, it's from my json? – Cathy Tandey Feb 04 '20 at 11:22
Did you replace your curly braces `{` with `(`? Because with `/* ... */ => {` and no explicit return statement, the function returns `undefined`. – mbojko Feb 04 '20 at 11:23

score 0 · Answer 3 · answered Feb 04 '20 at 11:15

0

return(
  names.map = (name, index) => {
    <Item key={index}>
      <IdName>{name.id}</IdName>
      <FirstName>{name.firstName}</FirstName>
      <LastName>{name.lastName}</LastName>
    </Item>
)

answered Feb 04 '20 at 11:15

Vinay Kumar

63
1
5

score 0 · Answer 4 · answered Feb 04 '20 at 11:34

Keys need to be uniq, we should not use index as the key , I think your id of each profile is similar to index values like 1,2,3. So it is better user keys like below

return (names.map = name => {
<Item key={`NamesItem-${name.id}`}>
  <IdName>{name.id}</IdName>
  <FirstName>{name.firstName}</FirstName>
  <LastName>{name.lastName}</LastName>
</Item>)

React: How can I render a list without keys?

4 Answers4