How to access array elements in react js?

Question

I am creating a calendar event using react and momentjs, everything works perfectly but now I would like to access a certain element in the array which in console looks like this.

   console.log("Event Slots", day.eventSlots);

Here is what I have tried using console.log

console.log("Event Slots", day.eventSlots.eventClasses);

But I get the following error

Here is full component

import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
// console.log("classes", classnames);
export default class CalendarDay extends React.Component {


    render () {

        let { day, isToday, events, onClick } = this.props;
        const dayClasses = classnames({
            'flexColumn': true,
            'day': true,
            'inactive': day.siblingMonth,
            'today': isToday,
        });


     //add daynames to caleday weekdayname
    //  console.log(eventData)

     let getWeekDay = day.weekDay;
     //console.log("weekday", getWeekDay);

     switch(getWeekDay) {
        case 0:
            getWeekDay ='SUN';
          break;
        case 1:
            getWeekDay ='MON';
          break;
        case 2:
            getWeekDay ='TUE';
          break;
        case 3:
            getWeekDay ='WED';
          break;
        case 4:
            getWeekDay ='THUS';
          break;
        case 5:
            getWeekDay ='FRI';
          break;
        case 6:
            getWeekDay ='SAT';
          break;
        default:

      }
      // add zero to all dates below 10
       if (day.day < 10) {
            day.day = "0" + day.day;
        };

        console.log("Event Slots", day.eventSlots.eventClasses);

        return (
            <div 
                onClick={onClick.bind(null, this, day)}
                className={dayClasses}>
                <div className="inner-grid">
                    <div className="date">
                        {day.day}
                    </div>
                    <div className="dayName">
                        {getWeekDay}
                    </div>
                    {events}
                </div>
            </div>
        );
    }
}

CalendarDay.propTypes = {
    day: PropTypes.object.isRequired,
    isToday: PropTypes.bool,
    events: PropTypes.array,
    onClick: PropTypes.func,
};

CalendarDay.defaultProps = {
    onClick: () => {},
}

NOTE: here is repo you can play around and see what is wrong calendar demo

What do I need to do to solve this problem?

Answer 1

After inspecting your code carefully I've found that the day.eventSlots returns something like [empty × 32, {…}]. It may happen for performing any map which returns an empty value too.

So what you have to do is pure the eventSlots array by using Object.values.

if (typeof day.eventSlots !== 'undefined' && day.eventSlots.length > 0 ) {
    console.log(Object.values(day.eventSlots)[0].eventClasses);
} 

Answer 2

Try day.eventSlots[1].eventClasses :)

Required object is the second element in the eventSlots array.

if (day && Array.isArray(day.eventSlots) && day.eventSlots[1] instanceof Object) {
  console.log(day.eventSlots[1].eventClasses);
}