How to fix React:' variable' is not defined no-undef-CodePudding

I have just started learnig react i am stuck on this problem i have created an array expenses. There is no problem with declaration but it is throwing error while using it.

import ExpenseItem from "./components/ExpenseItem";
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) 
 },

]; return (
<div>
  <h2>Let's get started!</h2>
  <ExpenseItem
    title={expenses[0].title}
    amount={expense[0].amount}
    date={expense[0].date}
  ></ExpenseItem>
  <ExpenseItem
    title={expenses[1].title}
    amount={expense[1].amount}
    date={expense[1].date}
  ></ExpenseItem>
</div>
    );
     }
   export default App;

And the error log is :

 src\App.js
 Line 23:17:  'expense' is not defined  no-undef
 Line 24:15:  'expense' is not defined  no-undef
 Line 28:17:  'expense' is not defined  no-undef
 Line 29:15:  'expense' is not defined  no-undef

CodePudding user response：

Looks like you misspelled expenses and instead wrote expense in your ExpenseItem element. Fixing the typo should fix your code.

CodePudding user response：

function app should have returned:

return (
<div>
  <h2>Let's get started!</h2>
  <ExpenseItem
    title={expenses[0].title}
    amount={expenses[0].amount}
    date={expenses[0].date}
  ></ExpenseItem>
  <ExpenseItem
    title={expenses[1].title}
    amount={expenses[1].amount}sa
    date={expenses[1].date}
  ></ExpenseItem>
</div>
);