Getting " Uncaught TypeError: Cannot read properties of undefined (reading 'Items')"

Question

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();

Answer 1

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;

Answer 2

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