How to print JavaScript new Date() in React?

Question

I cannot print simple JavaScript dates inside of React.

import React, { Component } from 'react';
import './ActivityWarningText.css';

class ActivityWarningText extends Component {

        render() {
            const str = new Date();
            return(
          <div>
            <h1>All activity is recorded. {str}</h1>
          </div>
         )
        }

}

export default ActivityWarningText;

I get this error:

Objects are not valid as a React child (found: Wed Apr 25 2018 18:09:03 GMT+0400 (Arabian Standard Time)). If you meant to render a collection of children, use an array instead.
    in h1 (at index.js:17)
    in div (at index.js:16)
    in ActivityWarningText (at index.js:34)
    in component (created by Route)
    in Route (at index.js:34)
    in div (at index.js:33)
    in div (at index.js:30)
    in Router (created by BrowserRouter)
    in BrowserRouter (at index.js:29)
    in App (at withAuthentication.js:36)
    in WithAuthentication (at index.js:14)

This works however, str.getFullYear()

Answer 1

Date object has to be casted to string. You can try with

{str.toString()}

or

{`${str}`}