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?