CODEWITHSUNDEEP
javascriptreactjsreact-redux
user944513
user944513

Reputation: 12729

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

Upvotes: 11

Views: 19101

Answers (6)

atazmin
atazmin

Reputation: 5707

Seems to work

export default function App() {
  return (
    <div>
      <h4>{date.toLocaleDateString()}</h4>
    </div>
  );
}

Upvotes: 1

Daniel Danielecki
Daniel Danielecki

Reputation: 10580

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

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

Upvotes: 0

Atit Timilsina
Atit Timilsina

Reputation: 61

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>

Upvotes: 1

Rithik Sunny
Rithik Sunny

Reputation: 21

I think you might be using a date wrongly

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

might solve the problem

Upvotes: 2

Miguel Angel
Miguel Angel

Reputation: 983

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!

Upvotes: 18

wdm
wdm

Reputation: 7189

value is a date object. Try this:

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

Upvotes: 12

Related Questions