I am having this error "Expenses.js:8 Uncaught TypeError: Cannot read properties of undefined (reading 'Items')" on a react project I am working on and I am not sure why I keep getting it. I am completely new to REACT. Any help is really appreciated
Here's my code for the files
App.js
import Expenses from "./components/Expenses";
function App() {
const expenses = [
{
id: "e1",
title: "Toilet Paper",
amount: 94.12,
date: new Date(2020, 7, 14),
},
{ id: "e2", title: "New TV", amount: 799.49, date: new Date(2021, 2, 12) },
{
id: "e3",
title: "Car Insurance",
amount: 294.67,
date: new Date(2021, 2, 28),
},
{
id: "e4",
title: "New Desk (Wooden)",
amount: 450,
date: new Date(2021, 5, 12),
},
];
return (
<div>
<h2>Let's get started!</h2>
<Expenses Items={expenses} />
</div>
);
}
export default App;
Expense.js
import ExpenseItem from "./ExpenseItem";
import "./Expenses.css";
function Expenses(props) {
return (
<div className="expenses">
<ExpenseItem
title={props.Items[0].title}
amount={props.Items[0].amount}
date={props.Items[0].date}
/>
<ExpenseItem
title={props.Items[1].title}
amount={props.Items[1].amount}
date={props.Items[1].date}
/>
<ExpenseItem
title={props.Items[2].title}
amount={props.Items[2].amount}
date={props.Items[2].date}
/>
<ExpenseItem
title={props.Items[3].title}
amount={props.Items[3].amount}
date={props.Items[3].date}
/>
</div>
);
}
export default Expenses();
To resolve the error you should change
export default Expenses(); to export default Expenses;
You also should refactor your code in this way
import ExpenseItem from "./ExpenseItem";
import "./Expenses.css";
function Expenses(props) {
return (
<div className="expenses">
{props.Items.map((item, i) => <ExpenseItem
key={i}
title={item.title}
amount={item.amount}
date={item.date}
/>)}
</div>
);
}
export default Expenses;
Never mind. I found the answer.
After I compare App.js and Expenses.js, I found that I wrote export default wrong for Expenses.js (It should be just export default Expenses;)
This is resolved