A continuación se muestra el error en la consola de mi navegador:
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:89Creo que me está refiriendo a la clase ExpenseList. A continuación se muestra la clase:
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;Parece que no puedo encontrar dónde está el problema, ya que ya puse la clave.
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>; } Muchas personas en los comentarios dicen poner una clave en ul , pero creo que deberías volver a formatear de esta manera.
Agregue la clave para el elemento ul , no ExpenseItem .
return props.expenses.map((expense) => ( <ul key = {expense.id} className="expenses-list"> <ExpenseItem title={expense.title} amount={expense.amount} date={expense.date} /> </ul> ));o bucle solo a ExpenseItem , no al elemento ul .
return <ul className="expenses-list"> props.expenses.map((expense) => ( <ExpenseItem key = {expense.id} title={expense.title} amount={expense.amount} date={expense.date} /> )); </ul>