React toisostring

Viewed 237

guys every time i try to access a date property in an array of object found in another components using props and i convert it to a string using the method 'toISOString() ' i have the error toISOS string not defined help me please here is the code

Here is my custom file so when i try accessing the date property the moment i try converting it to a string i have an error but the other properties a displayed without problems

import "./Style.css";
function ExpenseItem(props) {
  const expenseDate= new Date(2021,2,28);
  return (
    <div className="expense-item ">
      <div>{props.date2.toISOString()}</div>
      <div className= "expense-item__description">
          <h2> {props.name1}</h2>
          <div className="expense-item__price">${props.Amount1}</div>
      </div>
    </div>
  );
}

export default ExpenseItem;

here is my app file where my array of object is declaired

import ExpenseItem from "./components/ExpenseItem";
function App() {
  const expenses = [
    {
      id: "e1",
      title: "Toilet Paper",
      amount: 2000.12,
      date: new Date(2020, 7, 14),
    },
    { 
      id: "e2", 
      title: "New TV", 
      amount: 799.49,
       date1: new Date(2021, 2, 12)
   },
    {
      id: "e3",
      title: "Car Insurance",
      amount: 2000,
      date1: new Date(2021, 2, 28),
    },
    {
      id: "e4",
      title: "New Desk (Wooden)",
      amount: 450,
      date1: new Date(2021,2,28)
    }
  ];
  return (
    <div>
      <ExpenseItem
        name1={expenses[0].title}
        Amount1={expenses[0].amount}
        date2={expenses[0].date1}
      ></ExpenseItem>
      <ExpenseItem
        name1={expenses[1].title}
        Amount1={expenses[1].amount}
        date2={expenses[1].date1}
      ></ExpenseItem>
      <ExpenseItem
        name1={expenses[2].title}
        Amount1={expenses[2].amount}
        date2={expenses[2].date1}
      ></ExpenseItem>
      <ExpenseItem
        name1={expenses[3].title}
        Amount1={expenses[3].amount}
        date2={expenses[3].date1}
      ></ExpenseItem>
    </div>
  );
}

export default App;


 
1 Answers

It is date1, instead of date

...
{
  id: "e1",
  title: "Toilet Paper",
  amount: 2000.12,
  date1: new Date(2020, 7, 14),
},
...
Related