How can I solve this 'key' warning?

user_15352409 0
Viewed 80

Below is the error in my browser console:

Warning: Each child in a list should have a unique "key" prop. See https://reactjs.org/link/warning-keys for more information.
ExpenseList@http://localhost:3000/main.cfec1fef7369377b9a13.hot-update.js:29:7
div
Card@http://localhost:3000/static/js/main.chunk.js:2973:19
div
Expenses@http://localhost:3000/static/js/main.chunk.js:1482:97
div
App@http://localhost:3000/static/js/main.chunk.js:296:89

I believe it is referring me to the ExpenseList class. Below is the class:

import React from "react";
 
import ExpenseItem from "./ExpenseItem";
import './ExpensesList.css';
 
const ExpenseList = props => {
 
    if (props.expenses.length > 0) {
      
      return props.expenses.map((expense) => (
        <ul className="expenses-list">
          <ExpenseItem
            key={expense.id}
            title={expense.title}
            amount={expense.amount}
            date={expense.date}
          />
        </ul>
      ));
    }
 
    return <h2 className="expenses-list__fallback">Found No Expenses</h2>;
 
 
}
 
export default ExpenseList;

I cannot seem to find where the problem is, as I have already put the key.

reactjs javascript
2 Answers
const ExpenseList = props => {
 
    if (props.expenses.length > 0) {
      return <ul className="expenses-list">
      {props.expenses.map((expense) => (
          <ExpenseItem
            key={expense.id}
            title={expense.title}
            amount={expense.amount}
            date={expense.date}
          />
      ))}
      </ul>
    }
    return <h2 className="expenses-list__fallback">Found No Expenses</h2>;
}

Many people in comment say put a key in ul, but I think you should re-format like this.

user_84370990

Add key for ul element, not ExpenseItem.

return props.expenses.map((expense) => (
    <ul key = {expense.id} className="expenses-list">
      <ExpenseItem
        title={expense.title}
        amount={expense.amount}
        date={expense.date}
      />
    </ul>
  ));

or loop to only ExpenseItem, not ul element.

return <ul className="expenses-list">
     props.expenses.map((expense) => (
      <ExpenseItem
        key = {expense.id}
        title={expense.title}
        amount={expense.amount}
        date={expense.date}
      />
     ));
    </ul>
user_60464990
Related