React unique key when mapping warning

Question

I'm quite new to react and I'm facing a problem I can't solve. Here is my react component:

import React from 'react';
import Header from './Header';
import ContestPreview from './ContestPreview';

class App extends React.Component {

    state = { 
        pageHeader: 'Naming Contests',
        whatever: 'test'
    };

    render() {
        return (
            <div className="App">
                <Header message={this.state.pageHeader} />
                <div>
                    {this.props.contests.map(contest =>
                        <ContestPreview key={contest.id} {...contest} />
                    )}
                </div>
            </div>
        );
    }
}

export default App;

This Code gives me the following warning:

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of App. See HERE-FB-URL-I-REMOVED for more information. in ContestPreview (created by App) in App

I totally understand what this error means. I understand that each element of an array should have a unique key when looping trough them. What I don't understand is why I get the error, since in my opionion the key should be defined with my <ContestPreview key={contest.id} {...contest} /> ... is key={contest.id} not enough?

Here is my contest data:

{
  "contests": [
    {
      "id": 1,
      "categoryName": "Business/Company",
      "contestName": "Cognitive Building Bricks"
    },
    {
      "id": 2,
      "categoryName": "Magazine/Newsletter",
      "contestName": "Educating people about sustainable food production"
    },
    {
      "id": 3,
      "categoryName": "Software Component",
      "contestName": "Big Data Analytics for Cash Circulation"
    },
    {
      "id": 4,
      "categoryName": "Website",
      "contestName": "Free programming books"
    }
  ]
}

In my opionion it should work, I can't understand why I still get this error. I would really like to get some help on my problem, it would be really cool if someone can explain me whats going on here since I really try to understand how it works.

Thank you for your help! :)

Can you check if if are getting undefined or null for the data at any point of time — Shubham Khatri, Sep 26 '17 at 08:42
@spencer.sm No, but I solved it by myself. I restarted the whole server, still the same. So I was a bit pissed off and decided to shut down my computer for an hour. After the restart, it worked perfectly. No idea what it was, think something wasn't laoded correctly. — Twinfriends, Sep 26 '17 at 10:39

Elumalai Kaliyaperumal · Answer 1 · 2017-09-26T09:20:08.827

0

Put wrapper to rendering of each object's properties.

<div>
    {this.props.contests.map(contest =>
        <div key={contest.id}>
             <ContestPreview {...contest} />
        </div>
    )}
</div>

edited Sep 26 '17 at 09:20

answered Sep 26 '17 at 08:52

Elumalai Kaliyaperumal

1,498
1
12
24

score 0 · Answer 2 · answered Sep 26 '17 at 09:02

I can think of two workarounds...

First way would be to add the key to a surrounding div instead of directly on the ContestPreview element.

<div>
  {this.props.contests.map(contest =>
    <div key={contest.id}><ContestPreview {...contest} /></div>
  )}
</div>

Second way would be to modify ContestPreview so that it actually uses the key prop.

render(){
  <div key={this.props.key}>
  ...
  </div>
}

score -1 · Answer 3 · answered Sep 26 '17 at 08:35

In your code here

<div className="App">
   <Header message={this.state.pageHeader} />
    <div>
        {this.props.contests.map(contest => {
            console.log('contest id =', contest.id);
            return (<ContestPreview key={contest.id} {...contest} />);
        })}
    </div>
</div>

This will console the id(key) of each component, that you are rendering in your map. I think for some reason in your array of object you have an object which has the same key.

This way when you see the console.log() results. You will know where in your object you have the error.

I hope this helps you in debugging your error.

React unique key when mapping warning

3 Answers3

Linked