ReactJs - Each child in a list should have a unique "key" prop

Question

How to make lopping using ReactJs from api using Entity Framework to get Data. First, I generated model and then make method api. after that I lopping using js to get api. I look at the example from FetchData, When I get build project the first time. I make the same but my code not working. show the error Each child in a list should have a unique "key" prop. What wrong with my code api or my javascript?

Controller Api

[HttpGet("[action]")]
public IEnumerable<Employees> Employees()
{
  return db.Employees.ToList();
}

public class Employees
{
  public int EmployeeId { get; set; }
  public string EmployeeName { get; set; }
  public DateTime? JoinDate { get; set; }
  public decimal? Height { get; set; }
}

javascript

import React, { Component } from 'react';

export class ListData extends Component {
  constructor(props) {
    super(props);
    this.state = { forecasts: [], loading: true };

    fetch('api/SampleData/Employees')
      .then(response => response.json())
      .then(data => {
        this.setState({ forecasts: data, loading: false });
      });
  }

  static renderForecastsTable(forecasts) {
    return (
      <table className='table table-striped'>
        <thead>
          <tr>
            <th>No</th>
            <th>Name</th>
            <th>Join Date</th>
            <th>Height</th>
          </tr>
        </thead>
        <tbody>
          {forecasts.map(forecast =>
            <tr key={forecast.EmployeeId}>
              <td>{forecast.EmployeeId}</td>
              <td>{forecast.EmployeeName}</td>
              <td>{forecast.JoinDate}</td>
              <td>{forecast.Height}</td>
            </tr>
          )}
        </tbody>
      </table>
    );
  }

  render() {
    let contents = this.state.loading
      ? <p><em>Loading...</em></p>
      : ListData.renderForecastsTable(this.state.forecasts);

    return (
      <div>
        <h2>List</h2>

        <p><a href="#">Create New</a></p>

        {contents}
      </div>
    );
  }
}

You need to give each a key prop too. – Sasha Jul 03 '19 at 10:05 — Sasha, Jul 03 '19 at 10:05

score 0 · Accepted Answer · answered Jul 03 '19 at 10:11

0

By looking at the error, we can say that your EmployeeId is not unique. You must give unique key prop to list items. You can do this,

{forecasts.map((forecast,index) =>
     <tr key={index}> //Don't make it habit to use index as key props, use something unique from your array
         <td>{forecast.EmployeeId}</td>
         <td>{forecast.EmployeeName}</td>
         <td>{forecast.JoinDate}</td>
         <td>{forecast.Height}</td>
     </tr>
)}

answered Jul 03 '19 at 10:11

ravibagul91

20,072
5
36
59

Judging by the API call, it seems that all employees may be unique, this error can also occur if there is no `key` prop passed in also. I think that the issue is the `` area because they're rendered in the map also, and I think it may expect the key in there too. – Sasha Jul 03 '19 at 10:14
1

@Sasha No key required for inner element. – ravibagul91 Jul 03 '19 at 10:15
The answer here says otherwise: https://stackoverflow.com/questions/28329382/understanding-unique-keys-for-array-children-in-react-js " You should add a key to each child as well as each element inside children." – Sasha Jul 03 '19 at 10:22
@Stfvns the link states that each of your inner `td` required the key prop too. – Sasha Jul 03 '19 at 10:41
@ravibagul91 different problem.The data is not showing. I see in the console, nothing error anything. but column table is created – Stfvns Jul 03 '19 at 13:51
@ravibagul91 the api is work fine. inspect element in html no any data show – Stfvns Jul 03 '19 at 13:57
`console.log(forecasts)` in `renderForecastsTable` function and check if data is coming. – ravibagul91 Jul 03 '19 at 14:21
@ravibagul91 yes. It is show it array. console.log(JSON.stringify(forecasts)) `[{"employeeId":15,"employeeName":"123212","joinDate":"2019-03- ..bla bla..` – Stfvns Jul 03 '19 at 14:31
object keys are case sensitive, check whether you are using correct key name as `employeeId` and not `EmployeeId` as in post. – ravibagul91 Jul 03 '19 at 14:44
1

What? yessss. I not even know it. Because The model using `EmployeeId` when into forecast to be `employeeId`. thank – Stfvns Jul 03 '19 at 15:06

ReactJs - Each child in a list should have a unique "key" prop

1 Answers1