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: no se pueden leer las propiedades de undefined (leyendo 'toISOString')
Dará este error porque su props.date no está undefined y no puede llamar a toISOString en undefined .
Por lo tanto, verifique por qué el campo props.date no está undefined , y si el caso está relacionado con la API calling o es asynchronous , vaya con la solución de optional chaining , o si no es compatible, vaya con el flujo regular .
Encadenamiento opcional
<div>{props.date?.toISOString()}</div>Regular
<div>{props.date ? props.date.toISOString() : null}</div>Parece que props o props.date no están undefined . undefined no tiene un método para toISOString . Por lo tanto, llamar a esta función arroja un error.
Asegúrese de pasar los accesorios correctos en su componente principal.
Tuve el mismo problema. El problema estaba en realidad en el archivo App.js. Escribí la sintaxis incorrecta de ExpenseItem. Por lo tanto, debe verificar que incluye los accesorios en la etiqueta ExpenseItem, ¡no afuera, no entre! Ejemplo <ExpenseItem "LOS ACCESORIOS" >
<ExpenseItem title={expenses[0].title} amount={expenses[0].amount} date={expenses[0].date} ></ExpenseItem>