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.
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.
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>