Why i get an console key error after mapping Array in React?

Question

I am developing a react app where I have an array of objects.I map the Objects in React like this

<ListGroup id="building_list">
              {this.state.buildings.map(item => {
                return (
                  <ListGroupItem className="booking_list_group " key={item.id}>
                    <Container
                      className="booking_building my-auto "
                      fluid={true}
                    >
                      <Row>
                        <Col xs={4} className="text-center my-auto">
                          <FaWarehouse id="booking_icon"></FaWarehouse>
                        </Col>
                        <Col xs={6} className=" my-auto ">
                          {" "}
                          <div>{item.name}</div>
                        </Col>
                        <Col xs={2} className="my-auto ">
                          {" "}
                          <div
                            className="test"
                            onClick={event => this.completeBuidling(item.id)}
                          ></div>
                        </Col>
                      </Row>
                    </Container>
                  </ListGroupItem>
                );
              })}
            </ListGroup>

After this the List gets displayed and it works fine.The only problem is that i get an Error in in the Console

Ok now there is the Array

What could be the problem? Thank you in advance

Does this answer your question? [Understanding unique keys for array children in React.js](https://stackoverflow.com/questions/28329382/understanding-unique-keys-for-array-children-in-react-js) — EugenSunic, Feb 24 '20 at 13:54
No in every case in the whole application and every object has an id — Leon Greiner, Feb 24 '20 at 13:56
@LeonGreiner : just for the sake of clarity, show us the excerpt from `this.state.buildings` to demonstrate your sourcing objects have `id` property — Yevhen Horbunkov, Feb 24 '20 at 14:02
@Yevgen Gorbunkov ok i have logged the array into the console — Leon Greiner, Feb 24 '20 at 14:48
@LeonGreiner : than your code should [work](https://jsfiddle.net/9sz1xdy0/1/) perfectly fine (in slightly shortcircuited form, though) and I would recommend you to set up a [codesandbox](https://codesandbox.io) to reproduce your issue and get some ideas about what may possibly go wrong. — Yevhen Horbunkov, Feb 24 '20 at 15:04

score 0 · Answer 1 · edited Feb 24 '20 at 14:29

extract everything what you return to map function into a separate Component and just pass props - then you can use only one key

const ListGroupItemRow = ({fluid, name, id}) => (
<ListGroupItem className="booking_list_group ">
                    <Container
                      className="booking_building my-auto "
                      fluid={true}
                    >
                      <Row>
                        <Col xs={4} className="text-center my-auto">
                          <FaWarehouse id="booking_icon"></FaWarehouse>
                        </Col>
                        <Col xs={6} className=" my-auto ">
                          {" "}
                          <div>{name}</div>
                        </Col>
                        <Col xs={2} className="my-auto ">
                          {" "}
                          <div
                            className="test"
                            onClick={event => this.completeBuidling(id)}
                          ></div>
                        </Col>
                      </Row>
                    </Container>
                  </ListGroupItem>
)

and then use

{this.state.buildings.map(item => (<ListGroupItemRow ...item key={item.id} />))}

I didn't test it of course but I'm adding it because I was asked to be more specific and verbose.

sure I can make it clearer. I'll amend my answer in a moment to be more verbose. But can you explain me what do you mean by "OP"? — Dom, Feb 24 '20 at 14:20
@YevgenGorbunkov no code manually. I updated my answer is that make sense now? Hope it's enough verbose what I suggested — Dom, Feb 24 '20 at 14:31
aside, from your last line should rather contains something more like ``, I don't see how your suggested solution may behave differently from what OP currently has — Yevhen Horbunkov, Feb 24 '20 at 14:40

score 0 · Answer 2 · edited Feb 25 '20 at 08:16

0

Your example should be working. Are you sure that the error doesn't refer to an other mapping? The error message says div, and (assuming you use Reactstrap) ListGroupItem's render li elements, so maybe you forgot to include keys somewhere else in your application.

edited Feb 25 '20 at 08:16

RBT

24,161
21
159
240

answered Feb 25 '20 at 08:12

maten

566
6
17

score -1 · Answer 3 · answered Feb 24 '20 at 13:55

just add the key like this. but i think it should work for the above code

          <ListGroup id="building_list">
              {this.state.buildings.map((item,index) => {
                return (
                  <ListGroupItem className="booking_list_group " key={index}>
                    <Container
                      className="booking_building my-auto "
                      fluid={true}
                    >
                      <Row>
                        <Col xs={4} className="text-center my-auto" key={"col1"+index}>
                          <FaWarehouse id="booking_icon"></FaWarehouse>
                        </Col>
                        <Col xs={6} className=" my-auto " key={"col2"+index}>
                          {" "}
                          <div>{item.name}</div>
                        </Col>
                        <Col xs={2} className="my-auto " key={"col3"+index}>
                          {" "}
                          <div
                            className="test"
                            onClick={event => this.completeBuidling(item.id)}
                          ></div>
                        </Col>
                      </Row>
                    </Container>
                  </ListGroupItem>
                );
              })}
            </ListGroup>

OP *has* assigned `key` prop, moreover, using array indexes as a key is [less preferable](https://en.reactjs.org/docs/lists-and-keys.html#keys) than unique property (like `id`, used by OP) of a sourcing object — Yevhen Horbunkov, Feb 24 '20 at 13:59

Why i get an console key error after mapping Array in React?

3 Answers3