Following is my code which is working fine if I initialize test with a string, though if I changed it to new Date() its throwing error. Let me know what I am doing wrong as I just started with React.

Code -

import React from 'react';
import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';

    class App extends React.Component {
        render() {
            //let test = 'this is a string'; // WORKING FINE
            let test = new Date();
            return (
                <div>
                    <h1>Hello World</h1>
                    <p>{test}</p>
                </div>
            );
        }
    }

    ReactDOM.render(<App />, document.getElementById('root'));
    registerServiceWorker();

Error -

Objects are not valid as a React child (found: Fri Jul 21 2017 02:11:18 GMT+0530 (India Standard Time)). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons.

Following is my code which is working fine if I initialize test with a string, though if I changed it to new Date() its throwing error. Let me know what I am doing wrong as I just started with React.

Code -

import React from 'react';
import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';

    class App extends React.Component {
        render() {
            //let test = 'this is a string'; // WORKING FINE
            let test = new Date();
            return (
                <div>
                    <h1>Hello World</h1>
                    <p>{test}</p>
                </div>
            );
        }
    }

    ReactDOM.render(<App />, document.getElementById('root'));
    registerServiceWorker();

Error -

Objects are not valid as a React child (found: Fri Jul 21 2017 02:11:18 GMT+0530 (India Standard Time)). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons.

• javascript
• reactjs
• ecmascript-6

• 5 test.toString() – Xotic750 Commented Jul 20, 2017 at 20:48
• @Xotic750 yeah it will work but why I am not able to print it like in old JS days ? – Nesh Commented Jul 20, 2017 at 20:50
• 1 @Xotic750 and what does this error means - If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. – Nesh Commented Jul 20, 2017 at 20:51
• 2 You cannot print the object because React is trying to render the object as a component. As it is not a string nor a React component, it doesn't know what to do and how to render it. – ojathelonius Commented Jul 20, 2017 at 20:53
• 2 p's children must be of type node for JSX, and a date object is not of type node for JSX. I assume that you are talking about when you used HTML and the date gets automajically converted toString. But JSX and HTML are not the same thing. – Xotic750 Commented Jul 20, 2017 at 20:55

5 Answers 5

You are seeing that because Date is an object not a string. To get it to work as you have it with no libraries:

import React from 'react';
import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';

class App extends React.Component {
    render() {
        //let test = 'this is a string'; // WORKING FINE
        let test = new Date();
        return (
            <div>
                <h1>Hello World</h1>
                <p>{test.toString()}</p>
            </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

Call the toString() method on the date object.

as @Brady Edgar said, you cannot use a Date object into JSX because there is no string interpolation between {} but JSX expressions. When you use interpolation, like Today is ${ new Date() } JS converts the Date object to String automatically.

What you're doing is using JSX expressions, and { new Date() } returns a Date object, and that is not a valid React child.

As they already said, you need to convert your Date object to String. You can use a library such as moment or just use the method toLocaleDateString of Date object in order to use the browser locale:

let test = new Date();
return (
  <div>
    <h1>Hello World</h1>
    <p>{ test.toLocaleDateString() }</p>
  </div>
);

I'm sure that you've already solve that, but I wanted to put emphasis on what you are using is not interpolation but JSX expressions.

The issue is you are passing an object when React is expecting a string. I would recommend working with a package such as moment. When ever doing date related stuff I find its almost always more efficient to work with a package...and I never say that.

If you are really against having a package then just run .toString() on the end of test.

let test = new Date();
const App = ({}) => (
   <div>
       <h1>Hello World</h1>
       <p>{test.toString()}</p>
   </div>
)

....Presentational components all the way!!

Try this :

<p>{test.toString()}</p>

You're trying to render an object which is not a React component, hence React throws the error.

try this:

let test = new Date();
const App = ({}) => (
   <div>
       <h1>Today date</h1>
       <p>{test}</p>
   </div>
)