title: eslint: Missing "key" prop for element in iterator (react/jsx-key)
body: <p>I am new to React, and I'm trying to output a table containing the information of users. But Eslint is keep giving me the following error:</p>
  
  <p><code>[eslint] Missing "key" prop for element in iterator [react/jsx-key]</code></p>
  
  <p>I am not sure if I did this properly, but I have assigned a unique ID number for each person in the user list, but not sure why the error is persistent.</p>
  
  <p>So in my PeopleCard.js I have the following:</p>
  
  <pre><code>import React from "react";
  import {
    Card,
    CardImg,
    CardText,
    CardBody,
    CardTitle,
    CardSubtitle,
    Button
  } from "reactstrap";
  import PropTypes from "prop-types";
  
  class PeopleCard extends React.Component {
    static propTypes = {
      person: PropTypes.object,
      id: PropTypes.number,
      name: PropTypes.string,
      company: PropTypes.string,
      description: PropTypes.string
    };
    render() {
      return (
        &lt;div&gt;
          &lt;Card&gt;
            &lt;CardImg
              top
              width="100%"
              src="https://via.placeholder.com/318x180.png"
              alt="Card image cap"
            /&gt;
            &lt;CardBody&gt;
              &lt;CardTitle&gt;{this.props.person.name}&lt;/CardTitle&gt;
              &lt;CardSubtitle&gt;{this.props.person.company}&lt;/CardSubtitle&gt;
              &lt;CardText&gt;{this.props.person.description}&lt;/CardText&gt;
              &lt;Button&gt;Button&lt;/Button&gt;
            &lt;/CardBody&gt;
          &lt;/Card&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default PeopleCard;
  </code></pre>
  
  <p>And in my MainArea.js, I have the following:</p>
  
  <pre><code>import React from "react";
  import { Container, Row, Col } from "reactstrap";
  import PeopleCard from "./PeopleCard";
  
  class MainArea extends React.Component {
    constructor() {
      super();
      this.state = {
        people: [
          {
            id: 1,
            name: "John",
            company: "Some Company, Inc",
            description: "Met at a party."
          },
          {
            id: 2,
            name: "Mary",
            company: "Some Company, Inc",
            description: "Met at a party."
          },
          {
            id: 3,
            name: "Jane",
            company: "Some Company, Inc",
            description: "Met at a party."
          }
        ]
      };
    }
    render() {
      let peopleCard = this.state.people.map(person =&gt; {
        return (
          &lt;Col sm="4"&gt;
            &lt;PeopleCard key={person.id} person={person} /&gt;
          &lt;/Col&gt;
        );
      });
      return (
        &lt;Container fluid&gt;
          &lt;Row&gt;{peopleCard}&lt;/Row&gt;
        &lt;/Container&gt;
      );
    }
  }
  
  export default MainArea;
  </code></pre>
  
  <p>The following line is throwing the error, and I cannot figure out why:</p>
  
  <pre><code>&lt;Col sm="4"&gt;
     &lt;PeopleCard key={person.id} person={person} /&gt;
  &lt;/Col&gt;
  </code></pre>
  
  <p>How can I prevent this error from appearing?</p>