CODEWITHSUNDEEP
datereactjsstate
D.R
D.R

Reputation: 859

How to store and present state of time? (YYYY-MM-DD format) in react

In my Statistics state, there are 

const initialState = {
 fetching: false,
 channel: null,
 dateFrom: {},
 dateTo: {},
};

dateFrom and dateTo are values that when user clicks start date and end date from calendar. I am using rc-calendar for showing and getting data of date.

In my GeneralReport component, I am trying to show start date dateFrom and end date dateTo. So I made code like below

render () {
    const { stat } = this.props;
    console.log(this.props.stat)
    return (
        <div className = "general_report">
            <header className = "general_report_head">General Report</header>
            <div className="report_dates">
            From<span className="number">{this.props.stat.dateFrom}</span>

To{this.props.stat.dateTo}

But it triggers error that Objects are not valid as a React child (found: Thu Jan 12 2017 08:00:00 GMT+0800 (HKT)). 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. Check the render method of GeneralReport and TypeError: internalInstance is null

How should I present dateFrom and dateTo?

Thanks in advance.

---Edit Components 

import React, {PropTypes}                           from 'react';
import classnames                                   from 'classnames';
import Actions                                      from '../../       actions/statistics';
import Moment                                       from 'moment';

export default class GeneralReport extends React.Component {
render () {
    const { stat } = this.props;
    console.log(this.props.stat)
    return (
        <div className = "general_report">
            <header className = "general_report_head">General Report</header>
            <div className="report_dates">
            From<span className="number">{this.props.stat.dateFrom.format('YYYY-MM-DD')}</span>To<span className="number">{this.props.stat.dateTo.format('YYYY-MM-DD')}</span>
            </div>
            <div className="report_main_result"> Total Revenue: <span className="number">{this.props.stat.revenue}</span></div>
            <div className="report_main_result"> Total orders: <span className="number">{this.props.stat.order}</span></div>
        </div>
     );


 }
}

Upvotes: 1

Views: 30889

Answers (4)

Lahiru Amarathunge
Lahiru Amarathunge

Reputation: 819

import moment from 'moment'

moment(date).format('YYYY-MM-DD')

"date" is your state or prop

Upvotes: 1

Ilanus
Ilanus

Reputation: 6928

This should work and not give you any error.

import React, { PropTypes } from 'react';
import classnames           from 'classnames';
import Actions              from '../../actions/statistics';
import moment               from 'moment';

export default class GeneralReport extends React.Component {
  render () {
    const { stat } = this.props
    const { dateFrom, dateTo, revenue, order } = stat
    return (
      <div className="general_report">
        <header className="general_report_head">
          General Report
        </header>
        <div className="report_dates">
        From
        <span className="number">
          {moment(dateFrom).format('YYYY-MM-DD')}
        </span>
        To
        <span className="number">
          {moment(dateTo).format('YYYY-MM-DD')}
        </span>
        </div>
        <div className="report_main_result">
          Total Revenue:
        <span className="number">
          {revenue}
        </span>
        </div>
        <div className="report_main_result">
        Total orders:
        <span className="number">
          {order}
        </span>
        </div>
      </div>
    );
  }
}

Upvotes: 1

Mayank Shukla
Mayank Shukla

Reputation: 104399

Date is an object, you cant render it directly in ui, convert the date object to string first. You already imported moment, use the format function, try this:

import React, {PropTypes} from 'react';
import classnames from 'classnames';
import Actions from '../../       actions/statistics';
import Moment from 'moment';

export default class GeneralReport extends React.Component {
    render () {
        //const { stat } = this.props;
        //console.log(this.props.stat)
        return (
            <div className = "general_report">
                <header className = "general_report_head">General Report</header>
                <div className="report_dates">
                    From<span className="number">{Moment(this.props.stat.dateFrom).format('YYYY-MM-DD')}</span>
                    To<span className="number">{Moment(this.props.stat.dateTo).format('YYYY-MM-DD')}</span>
                </div>
                <div className="report_main_result"> Total Revenue: <span className="number">{this.props.stat.revenue}</span></div>
                <div className="report_main_result"> Total orders: <span className="number">{this.props.stat.order}</span></div>
            </div>
        );
   }
}

Reference: http://momentjs.com/

U can use the Date object method toDateString() also, try this:

<div className="report_dates">
    From<span className="number">{this.props.stat.dateFrom.toDateString()}</span>
    To<span className="number">{this.props.stat.dateTo.toDateString()}</span>
</div>

Upvotes: 6

Kev
Kev

Reputation: 5452

Apparently dateFrom and dateTo are objects. And like the error message says: you can not display / use an object as a React child.

What you probably miss here is to call a formatting method on your dates.

I believe rc-calendar uses moment objects under the hood so you would probably do something like: 

<span>{this.props.stat.dateFrom.format('YYYY-MM-DD')}</span>

Upvotes: 0

Related Questions