'Objects are not valid as a React child getting error when adding div?

I am just rendering the data and display in between divs but I am getting error this

Objects are not valid as a React child (found: Wed Dec 09 1998 00:00:00 GMT+0530 (India Standard Time)). If you meant to render a collection of children, use an array instead.

<Fragment key={String(index) + String(i)}>
                    <div>{displaytext}</div>
                    <div>{value}</div>
                  </Fragment>

Only issue is on this line <div>{value}</div> if I remove this line everything works fine.If I add this line I am getting above error why ? here is my code https://codesandbox.io/s/ooj2wowy9q



Solution 1:[1]

value is a date object. Try this:

<div>{moment(value).format('DD-MM-YYYY')}</div>

Solution 2:[2]

React doesn't allow objects like Dates or Arrays as children, you need to convert value to string, like this:

<div>{new Date(value).toString()}</div>

Hope this helps you!

Solution 3:[3]

I think you might be using a date wrongly

<div>{value.toDateString()}</div>

might solve the problem

Solution 4:[4]

Date is Object itself and Objects are not valid as a React child. You need to convert value to string as,

<div>{value.toDateString()}</div>

Or, you can use Moment Js

<div>{moment(value).format('DD-MM-YYYY')}</div>

Solution 5:[5]

I had to use new Date(...) in combination with * 1000 to get the workable date format, an example:

new Date(props.date * 1000).toLocaleDateString()

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 wdm
Solution 2 Miguel Angel
Solution 3 Slava Rozhnev
Solution 4 buddemat
Solution 5 Daniel Danielecki