Cannot read property '0' of undefined

Do you want to request a feature or report a bug?

Bug

What’s the current behavior?

https://stackoverflow.com/questions/50210199/react-big-calendar-cannot-read-property-0-of-undefined

While implementing the basic project, the back and next buttons do not work. I get the following error:

Month.js:217 Uncaught TypeError: Cannot read property ‘0’ of undefined at MonthView.renderHeaders (Month.js:217) at MonthView.render (Month.js:209) at finishClassComponent (react-dom.development.js:8389) at updateClassComponent (react-dom.development.js:8357) at beginWork (react-dom.development.js:8982) at performUnitOfWork (react-dom.development.js:11814) at workLoop (react-dom.development.js:11843) at HTMLUnknownElement.callCallback (react-dom.development.js:100) at Object.invokeGuardedCallbackDev (react-dom.development.js:138) at invokeGuardedCallback (react-dom.development.js:187)

Upon closer inspection it fails here:

MonthView.prototype.renderHeaders = function renderHeaders(row, format, culture) {
    //failes here.
    var first = row[0];
    var last = row[row.length - 1];
    var HeaderComponent = this.props.components.header || _Header2.default;

    return _dates2.default.range(first, last, 'day').map(function (day, idx) {
      return _react2.default.createElement(
        'div',
        { key: 'header_' + idx, className: 'rbc-header' },
        _react2.default.createElement(HeaderComponent, {
          date: day,
          label: _localizer2.default.format(day, format, culture),
          localizer: _localizer2.default,
          format: format,
          culture: culture
        })
      );
    });
  };

After playing around with the project, it would appear the current date is not correctly set. Once I click on the button “today” it works as intended.

My code:

import React, {Component} from 'react';
import BigCalendar from 'react-big-calendar';
import moment from 'moment';

// Setup the localizer by providing the moment (or globalize) Object
// to the correct localizer.
BigCalendar.setLocalizer(BigCalendar.momentLocalizer(moment))

export default class CalendarComponent extends Component {

    constructor(props){
        super(props);



        this.state = {
            events: []
        }

    }

    render(){
        return (
            <div style={{flex: 1}}>
                <BigCalendar
                    events={this.state.events}
                    startAccessor='startDate'
                    endAccessor='endDate'
                />
            </div>
        );
    }
}

What’s the expected behavior?

Expected to have working back and next buttons to change dates.

[rottenoats]

@SLYtiger16 I tried with defaultDate prop and it worked. Thanks.

<div style={{flex: 1}}>
                <BigCalendar
                    events={this.state.events}
                    startAccessor='startDate'
                    endAccessor='endDate'
                    defaultDate={moment().toDate()}
                />
</div>

Though I don’t believe it should be specified (?), and it needs to be mentioned somewhere in the documentation other than the example source in the docs.

[FranciscoGileno]

+1