× TypeError: Cannot read property '0' of undefined - REACT.JS

Question

I am having this error TypeError: Cannot read property '0' of undefined on a react project I am working on and I am not sure why I keep getting it. I am completely new to REACT. I know I am passing an undefined

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;

and the file in question

Expenses.js

import ExpenseItem from "./ExpenseItem";
import Card from "./Card";
import "./Expenses.css";
function Expenses(props) {
     return (
      <Card className = "expenses">
            <ExpenseItem
                title={props.items[0].title}
                amount={props.items[0].amount}
                date={props.items[0].date}
            ></ExpenseItem>
            <ExpenseItem
                title={props.items[1].title}
                amount={props.items[1].amount}
                date={props.items[1].date}></ExpenseItem>
            <ExpenseItem
                title={props.items[2].title}
                amount={props.items[2].amount}
                date={props.items[2].date}></ExpenseItem>
            <ExpenseItem
                title={props.items[3].title}
                amount={props.items[3].amount}
                date={props.items[3].date}></ExpenseItem>
        </Card>
       
    );
 }

export default Expenses; 

I know the error occurs on line 8 but I am not sure how to fix it. The trace for the error is as follows

Expenses
C:/Users/Tinot/Documents/REACT/01-starting-setup/src/components/Expenses.js:8
   5 | return (
   6 |  <Card className = "expenses">
   7 |        <ExpenseItem
>  8 |            title={props.items[0].title}
     | ^   9 |            amount={props.items[0].amount}
  10 |            date={props.items[0].date}
  11 |        ></ExpenseItem>

Answer 1

Your prop.items is using a wrong case. It should be props.Items with a capital 'I' since your prop name is "Items"