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?

Check if the data has arrived before the console. day.eventSlots != undefined && day.eventSlots.length > 0 && console.log(day.eventSlots.eventClasses); — Sajeeb Ahamed
– Sajeeb Ahamed, Commented Mar 29, 2020 at 12:02
@user9964622, Instead of sharing your result in an image, you could share the real data that you receive in day.eventSlots .. Also day.eventSlots[1].eventClasses doesn't work for you?? — Maniraj Murugan
– Maniraj Murugan, Commented Mar 29, 2020 at 12:08

Sajeeb Ahamed · Accepted Answer · 2020-03-29 12:40:29Z

2

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);
}

answered Mar 29, 2020 at 12:40

Sajeeb Ahamed

6,4382 gold badges23 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

The Dead Man Over a year ago

Your El Profesor from Money heist? , El Perfecto, Thank you brother, may Allah bless ya hand

Hovercraft Full Of Eels Over a year ago

@SajeebAhamed: regarding your suggested edit on the "I am Worried about it" question: please don't propose edits to questions that are far off topic for the site. The cannot possibly provide benefit to the question (which has since been deleted)

Sajeeb Ahamed Over a year ago

Thank you so much for your suggestion @HovercraftFullOfEels I'll try to keep in mind your suggestion.

Max Starling · Accepted Answer · 2020-03-29 12:17:28Z

1

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);
}

edited Mar 29, 2020 at 12:17

answered Mar 29, 2020 at 12:02

Max Starling

1,03710 silver badges9 bronze badges

2 Comments

The Dead Man Over a year ago

CalendarDay.js:57 Uncaught TypeError: Cannot read property 'eventClasses' of undefined

The Dead Man Over a year ago

now I can see the event1 but the calendar contains 5 events, event1 event2 event3 event4 event 5 , how can retrun all of them , letter on I would like to do switch case something, like if eventClass == event1 do something, etc goes to the rest of the events,

Collectives™ on Stack Overflow

How to access array elements in react js?

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest