eslint: Missing "key" prop for element in iterator (react/jsx-key)

Question

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:

[eslint] Missing "key" prop for element in iterator [react/jsx-key]

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.

So in my PeopleCard.js I have the following:

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 (       <div>         <Card>           <CardImg             top             width="100%"             src="https://via.placeholder.com/318x180.png"             alt="Card image cap"           />           <CardBody>             <CardTitle>{this.props.person.name}</CardTitle>             <CardSubtitle>{this.props.person.company}</CardSubtitle>             <CardText>{this.props.person.description}</CardText>             <Button>Button</Button>           </CardBody>         </Card>       </div>     );   } }  export default PeopleCard; 

And in my MainArea.js, I have the following:

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 => {       return (         <Col sm="4">           <PeopleCard key={person.id} person={person} />         </Col>       );     });     return (       <Container fluid>         <Row>{peopleCard}</Row>       </Container>     );   } }  export default MainArea; 

The following line is throwing the error, and I cannot figure out why:

<Col sm="4">    <PeopleCard key={person.id} person={person} /> </Col> 

How can I prevent this error from appearing?

Answer 1

You should put the key on the outer element:

const peopleCard = this.state.people.map(person => (   <Col key={person.id} sm="4">     <PeopleCard person={person} />   </Col> ));