Component not rendering inside map function-React Native

Question

So, I have a dictionary with keys and an array of Objects as values for each key. What I need to do is render a new component with props coming from Object for each element of the array. This is how the it looks.

    1:
       [
         Object {
                  "ClassId":232,
                  "Teacher":"TeacherName"
                   ...
                }
        Object {
                  "ClassId":21,
                  "Teacher":"TeacherName"
                   ...
                }
        ...
        ]

This is the code I have right now but somehow the component does not render to the screen.

timetable[key]["value"]. The value field is there because the actual value for a key is another dictionary, but I'm only using the value. Printing the elements in the console instead of passing them as props to the CourseCard component looks good, the data is there.

       {Object.keys(timetable).map((key, index) => {
                    timetable[key]["value"].map(iter => {
                      return (
                        <CourseCard
                          teacher={iter["Teacher"]}
                          course={iter["ClassName"]}
                          classRoom={iter["ClassRoom"]}
                          time={iter["Time"]}
                          key={iter["Key"]}
                        />
                      );
                    });
                  })}

Shubham Khatri · Accepted Answer · 2018-03-26 12:01:24Z

10

You need to return the result of inner map function,

   {Object.keys(timetable).map((key, index) => {
                return timetable[key]["value"].map(iter => {
                  return (
                    <CourseCard
                      teacher={iter["Teacher"]}
                      course={iter["ClassName"]}
                      classRoom={iter["ClassRoom"]}
                      time={iter["Time"]}
                      key={iter["Key"]}
                    />
                  );
                });
              })}

answered Mar 26, 2018 at 12:01

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

2 Comments

Radulescu Petru Over a year ago

Thanks! It renders now, it puts some extra info in there but I can manage that. Thank you very much!!

Shubham Khatri Over a year ago

@RadulescuPetru, glad it helped

Collectives™ on Stack Overflow

Component not rendering inside map function-React Native

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related