Array or iterator should have a unique "key" prop

Question

I am trying to display a table which fetches data from a server and displays all the information in it. The code is printing my table header and information of the first object from the fetched API.

Its giving me an error.

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of MyTable"

import React from "react";

export default class MyTable extends React.Component {
  constructor(props) {
    super(props);

    console.log(props);
  }

  createTable = () => {
    let table = [];

    let tableHeader = (
      <thead>
        <tr>
          {this.props.columns.map(column => {
            return <th key={column.name}>{column.name}</th>;
          })}
        </tr>
      </thead>
    );

    let tableRows = [];
    for (
      let i = this.props.pgNo * this.props.maxItems;
      i < i + this.props.maxItems;
      i++
    ) {
      if (i > this.props.users.length) {
        break;
      } else {
        let row = (
          <tr>
            {this.props.columns.map(column => {
              return (
                <td key={column.key}>{this.props.users[i][column.key]}</td>
              );
            })}
          </tr>
        );

        tableRows.push(row);
      }
      let tableBody = <tbody>{tableRows}</tbody>;
      return (
        <table>
          {table}
          {tableHeader}
          {tableBody}
        </table>
      );
    }
  };
  render() {
    return <div className="col-sm-10">{this.createTable()}</div>;
  }
}

[ReactJS => Lists and Keys => Keys](https://reactjs.org/docs/lists-and-keys.html#keys) — Arman Charan, Jul 10 '18 at 10:09

score 2 · Accepted Answer · answered Jul 10 '18 at 10:13

2

you gave a key for both th and td but you

forgot to write a key in tr for row variable

answered Jul 10 '18 at 10:13

Sathish Thangaraj

174
1
9

score 1 · Answer 2 · answered Jul 10 '18 at 10:14

1

When rendering an array of React elements, a key on each element is needed for React to know how to update each element.

const list = ["Apple", "Banana", "Orange"]

class Component extends React.Component {
  render() {
    return list.map(item => {
      return (
        <div key={item}>{item}</div>
      )
    })
  }
}

You can read more about it here.

answered Jul 10 '18 at 10:14

Sebastian Olsen

10,318
9
46
91

even after giving a key it doesent display all of my data. – Irtaza Rawjani Jul 10 '18 at 10:18
it still displays only 1 object from the fetched json data – Irtaza Rawjani Jul 10 '18 at 10:19

score 0 · Answer 3 · answered Jul 10 '18 at 10:13

0

The problem is most likely that your <tr> elements don't have keys. Try giving them i as a key.

if (i > this.props.users.length) {
    break;
} else {
    let row = (
      <tr> <--- You should have a key prop here

Try using <tr key={i}>

answered Jul 10 '18 at 10:13

user2073973

564
6
21

1

Using index as key is not recommended, it can cause buggy behaviour where an item won't update because its key did not. – Sebastian Olsen Jul 10 '18 at 10:15

Array or iterator should have a unique "key" prop

3 Answers3