Admin
1
When I'm using the built-in Date() constructor it's rendering my page completely blank
import './ExpenseItem.css';
function ExpenseItem() {
const expenseDate = new Date(2022, 1, 1)
return (
<div className='expense-item'>
<div>{expenseDate}</div>
<div className='expense-item__description'>
<h2>Car Insurance</h2>
<div className='expense-item__price'>$269.64</div>
</div>
</div>
);
}
export default ExpenseItem;
This is because you are trying to render a Date as a React child and Objects are not valid as a React child (the reason behind your blank screen).
Change your code to be like:
const expenseDate = new Date(2022, 1, 1).toLocaleString();
In this way you will have a string instead, that is a valid React child.
Check the documentation on how to change your date-to-string format:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString
** Because Date is an object and you cant render object as child**
// toDateString() will convert it into sting.
const expenseDate = new Date(2022, 1, 1).toDateString();