Getting key prop warning in React, even though key is set

Question

Problem

I'm getting this warning:

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of EventsTable. See fb.me/react-warning-keys for more information.

react-runtime-dev.js?8fefd85d334323f8baa58410bac59b2a7f426ea7:21998 Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of Event. See fb.me/react-warning-keys for more information.

Source

This is EventsTable:

EventsTable = React.createClass({   displayName: 'EventsTable',    render() {     console.dir(this.props.list);      return (       <table className="events-table">         <thead>           <tr>             {_.keys(this.props.list[0]).map(function (key) {               if (key !== 'attributes') {                 return <th>{key}</th>;               }             })}          </tr>         </thead>          <tbody>           {this.props.list.map(function (row) {             return (               <Event key={row.WhatId} data={row} />             );           })}         </tbody>       </table>     )   } }); 

This is Event:

Event = React.createClass({   displayName: 'Event',    render() {     return (       <tr>         {_.keys(this.props.data).map((x) => {           if (x !== 'attributes')             return <td>{this.props.data[x]}</td>;         })}       </tr>     )   } }); 

Question

Clearly I've got the key prop on the <Event /> component. And I'm following the convention that you're supposed to include key on the component, not on the HTML itself (in other words, HTML tags within the Event component). Per the official React docs:

The key should always be supplied directly to the components in the array, not to the container HTML child of each component in the array:

I'm severely confused. Why am I getting warnings?

Answer 1

Have you tried adding a key to the <th> tag?

         <tr>             {_.keys(this.props.list[0]).map(function (key) {               if (key !== 'attributes') {                 return <th key={key}>{key}</th>;               }             })}          </tr> 

Answer 2

I realize this thread is pretty old, but I was just having this issue and it was driving me crazy. I ended up solving it when I realized because I had a <React.Fragment> which also needs a unique key.