React - Dealing with undefined state when mapping over an array of objects from API

Question

API data is fetched when component mounts, and state is set in the form

sectionData: {
  course: null,
  section_id: null,
  semester: null,
  number: null,
  seats: null,
  meetings: [],
  open_seats: null,
  waitlist: null,
  instructors: []
},

For reference the relevant API data looks like this

"meetings": [
 {
  "days": "TuTh",
  "room": "0324",
  "building": "IRB",
  "classtype": "",
  "start_time": "11:00am",
  "end_time": "12:15pm"
 },
 {
  "days": "MW",
  "room": "3120",
  "building": "CSI",
  "classtype": "Discussion",
  "start_time": "9:00am",
  "end_time": "9:50am"
 }
],

Using keys like course and section_id is fine, since they are predefined with null. However, if I am to map over each meeting object in meetings, and say access "days" or "room", each meeting is obviously undefined.

{this.state.sectionData.meetings.map(meeting => this.renderMeetings())}

    renderMeetings(meeting) {
        return (<div key={meeting}>     
            {meeting.days}
        </div>)
    }

Any easy fixes without having to make an entirely new Meeting component to predefine said keys? Merely checking for an undefined prevents React from crashing, but doesn't help with actually displaying the data.

what exactly so you want to achieve ?

ZaidRehman
– ZaidRehman

2020-02-15 08:51:30 +00:00
Commented Feb 15, 2020 at 8:51 — ZaidRehman
– ZaidRehman, Commented Feb 15, 2020 at 8:51

Michael Nelles · Accepted Answer · 2020-02-15 10:06:40Z

1

Am I unaware of all the capabilities of map.

In my limited experience the iterating variable meeting would be passed in to the function.

Would it help to Change

(meeting => this.renderMeetings())}

To This?

// pass meeting in to function
(meeting => this.renderMeetings(meeting))}

answered Feb 15, 2020 at 10:06

Michael Nelles

6,0688 gold badges49 silver badges61 bronze badges

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

1 Comment

George Liebert Over a year ago

Right on. Really dumb mistake on my part. Was completely confused on why the lifecycle was acting up like this, and it turned out to be something so silly.

ZaidRehman · Accepted Answer · 2020-02-15 10:05:02Z

0

There is a problem with your below code

renderMeetings(meeting) {
    return (<div key={meeting}>     
        {meeting.days}
    </div>)
}

meeting is an object so the key will always be converted to a string which is [object Object]. Keys can not be same

answered Feb 15, 2020 at 10:05

ZaidRehman

1,7612 gold badges19 silver badges32 bronze badges

Collectives™ on Stack Overflow

React - Dealing with undefined state when mapping over an array of objects from API

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related