Loading is not showing in react hooks-CodePudding

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/static/js/main.chunk.js:1481:7 div 
Card@http://localhost:3000/static/js/main.chunk.js:2299:19 div 
Expenses@http://localhost:3000/static/js/main.chunk.js:975:97 div 
App@http://localhost:3000/static/js/main.chunk.js:252:89 index.js:1

I get this error even before I input any new expense. I have gone to the expenses list class and I cannot seem to find the issuse. Below is the ExpensesList 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;

CodePudding user response：

Welcome to StackOverflow! Your error is related to the map that you are using in your code to render the list of expenses.

In React you must specify a key props whenever you render a list in order to help React render the list correctly:

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

For more information on keys and lists you can read the React Docs.

Edited with correct structure, thanks to Sobhan for the comment.