import './ExpenseItem.css';

function ExpenseItem(props){

return (
    <div className="expense-item">
        <div>{props.date.toISOString()}</div>
        <div className="expense-item__description">
            <h2>{props.title}</h2>
            <div class="expense-item__price">${props.amount}</div>
        </div>
    </div>
)
}

export default ExpenseItem;

TypeError: Cannot read properties of undefined (reading 'toISOString')

import './ExpenseItem.css';

function ExpenseItem(props){

return (
    <div className="expense-item">
        <div>{props.date.toISOString()}</div>
        <div className="expense-item__description">
            <h2>{props.title}</h2>
            <div class="expense-item__price">${props.amount}</div>
        </div>
    </div>
)
}

export default ExpenseItem;

TypeError: Cannot read properties of undefined (reading 'toISOString')

• javascript
• reactjs

• 1 date is undefined . <div>{props.date && props.date.toISOString()}</div> use this – Sooraj s Commented Nov 6, 2021 at 8:08
• It is not trivial at the begging why date is null, because if you pass date.toISOString() it will work. So, check if you have a ponent without any prop ;) – titusfx Commented Feb 19, 2022 at 19:52

6 Answers 6

It will give this error because your props.date is undefined and you can not call toISOString in undefined.

So, please check why props.date field is undefined, and if the case is related to API calling or asynchronous then go with the optional chaining solution, or if it is not supported then go with the regular flow.

Optional Chaining

<div>{props.date?.toISOString()}</div>

Regular

<div>{props.date ? props.date.toISOString() : null}</div>

Looks like either props or props.date is undefined. undefined does not have a methodtoISOString. Thus calling this function throws an error.

Make sure that you pass in correct props in your parent Component.

I had the same issue. The problem was actually in the App.js file I wrote the wrong syntax of ExpenseItem. There fore you should check that you include the props in the ExpenseItem tag, not outside, not beetween! Example <ExpenseItem "THE PROPS" >

<ExpenseItem
    title={expenses[0].title}
    amount={expenses[0].amount}
    date={expenses[0].date}
  ></ExpenseItem>

Please check opening and closing brackets(<>) where ExpenseItem ponent is imported in App.js For example: <ExpenseItem title="abc" amount="123" date={new Date(2021, 12, 15)}>

I got the same error. The problem is in App.js file, in custom ponent attribute I forgot to pass date but I'm supposed to received in App.js hence it showing error.

I had the same error. It appeared that I forgot to write zero in square brackets in one of my attributes:

date={expenses[0].date}