.map of an object in an array in React

Question

I am trying to loop through an object that contains arrays which contain objects inside of them in React and I get an error on the .map function. Here is the .map function followed by what the object looks like in this.state

.map:

//trying to access January from the object which is 0 starting month
let daysOfWeeks = this.state[0].map(function (day, i){
    ...
}

Here is an example of the object:

//0 is January, 1 is February, and so on... inside has objects that have the day number and day of week
let result = {
    0:[ 
        {dayNumber:1,dayOfWeek:"fri"},
        {dayNumber:2,dayOfWeek:"sat"},
        {dayNumber:3,dayOfWeek:"sun"},
        ...
      ],
    1:[
        {dayNumber:1,dayOfWeek:"mon"},
        {dayNumber:2,dayOfWeek:"tue"},
        {dayNumber:3,dayOfWeek:"wed"},
        ...
      ],
    2:[
        {dayNumber:1,dayOfWeek:"tue"},
        {dayNumber:2,dayOfWeek:"wed"},
        {dayNumber:3,dayOfWeek:"thur"},
        ...
      ],

    ...
};

//result is in a function that is returned and set state is calling the function and setting state to the object itself -- here is setState:

this.setState(getDaysArray(y,m));

//getDaysArray(y,m) returns that object above

What I want in the .map is for day to be the object I loop through. day.dayNumber and day.dayOfWeek

... .map(function(day, i){
    return(
        <div>
            <div>{day.dayNumber}</div>
            <div>{day.dayOfWeek}</div>
        </div>
    )
}

But what errors in on the .map is this.state[0] I think is the issue. Anyone know how I can access and loop through the objects in the array inside the parent object?

What is in state? Is this.state === result? In that case, you should use this.state.map instead of this.state[0].map — dejakob
– dejakob, Commented May 21, 2016 at 22:57
whats the error? dont listen to the above comment, its wrong. Obviously you cannot map through an object. — omarjmh
– omarjmh, Commented May 21, 2016 at 23:01
using let daysOfWeeks = this.state[0].map(function (day, i){ ... the error is: Uncaught TypeError: Cannot read property 'map' of undefined — Chipe
– Chipe, Commented May 21, 2016 at 23:19
using let daysOfWeeks = this.state.map(function (day, i){ ... the error is: Uncaught TypeError: this.state.map is not a function — Chipe
– Chipe, Commented May 21, 2016 at 23:20

omarjmh · Accepted Answer · 2016-05-21 23:06:38Z

2

Try this.state.result['0'].map(...)

When you have a an object like this, with a number as the key, even though the key is a 'number; you access it as a string. Object keys by default are strings.

let result = {
    0:[ 
        {dayNumber:1,dayOfWeek:"fri"},
        {dayNumber:2,dayOfWeek:"sat"},
        {dayNumber:3,dayOfWeek:"sun"},
        ...
      ]
}

answered May 21, 2016 at 23:06

omarjmh

13.9k6 gold badges37 silver badges42 bronze badges

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

Collectives™ on Stack Overflow

.map of an object in an array in React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related