React: Mapping through and rendering from nested object

Question

I am currently trying to loop through a nested object and then map values from there but it is not rendering.

Object {
  "classTags": Object {
    "Test Class v2": "f4e2754d-90e5-4904-b9b7-af6c7e66f4ff",
  },
  "termTags": Object {},
  "userTags": Object {
    "User tag": "bbb658b9-e897-4e6c-b949-bc6db64dff3d",
  },
}

My current code looks like so:

{Object.keys(taskTags).forEach((key) => {
    Object.keys(taskTags[key]).map((task) => (
         <View
              style={{
                  backgroundColor: colors.primary,
                  padding: 6,
                  paddingRight: 10,
                  borderRadius: 8,
                  display: "flex",
                  flexDirection: "row",
                  alignItems: "center",
                  marginRight: 0,
                  marginBottom: 6,
              }}
         >
         <Text
             style={{
                 fontSize: 16,
                 color: colors.light,
                 fontWeight: "bold",
                 marginRight: 10,
             }}
         >
             {task}
         </Text>
         <TouchableOpacity
             onPress={() => {          
                 console.log("do something");
             }}
         >
             <Icon name="times" size={16} color={colors.light} />
         </TouchableOpacity>
     </View>
 ));
})}

Because it is not rendering I am guessing that I am implementing the mapping incorrectly but when using the same logic to console.log the object it is correctly printing.

What am I doing wrong here?

Szymon Pancerz · Accepted Answer · 2021-04-14 19:35:15Z

2

This is because you're not returning the mapped value to the component render correctly. You should do something like that:

{Object.keys(taskTags).map((key) => 
   Object.keys(taskTags[key]).map((task) => (
         <View
              style={{
                  backgroundColor: colors.primary,
                  padding: 6,
                  paddingRight: 10,
                  borderRadius: 8,
                  display: "flex",
                  flexDirection: "row",
                  alignItems: "center",
                  marginRight: 0,
                  marginBottom: 6,
              }}
         >
         <Text
             style={{
                 fontSize: 16,
                 color: colors.light,
                 fontWeight: "bold",
                 marginRight: 10,
             }}
         >
             {task}
         </Text>
         <TouchableOpacity
             onPress={() => {          
                 console.log("do something");
             }}
         >
             <Icon name="times" size={16} color={colors.light} />
         </TouchableOpacity>
     </View>
 )))}

This will return correct array of mapped component.

answered Apr 14, 2021 at 19:35

Szymon Pancerz

2371 silver badge3 bronze badges

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

1 Comment

daxidngyn Over a year ago

This solution worked, thank you for the help!

Anas Ansari · Accepted Answer · 2021-04-14 19:47:34Z

2

I believe the reason it is not working is that we are not returning from the first function defined. It should be:

{Object.keys(taskTags).forEach((key) => {
  return Object.keys(taskTags[key]).map((task) => (
     <View
          style={{
              backgroundColor: colors.primary,
              padding: 6,
              paddingRight: 10,
              borderRadius: 8,
              display: "flex",
              flexDirection: "row",
              alignItems: "center",
              marginRight: 0,
              marginBottom: 6,
          }}
     >
     <Text
         style={{
             fontSize: 16,
             color: colors.light,
             fontWeight: "bold",
             marginRight: 10,
         }}
     >
         {task}
     </Text>
     <TouchableOpacity
         onPress={() => {          
             console.log("do something");
         }}
     >
         <Icon name="times" size={16} color={colors.light} />
     </TouchableOpacity>
 </View>
 ));
})}

You also need to put the map array method, to return an array of items because forEach won't return anything. Szyman Pancerz's answer explains it well.

edited Apr 14, 2021 at 19:47

answered Apr 14, 2021 at 19:28

Anas Ansari

1412 silver badges10 bronze badges

2 Comments

Joel Hager Over a year ago

I was just typing out an answer. This is correct. There is no return in the OP.

Szymon Pancerz Over a year ago

Actually this is not gonna work, because in the first Object.keys you also need to put map array method, to return array of items. forEach won't return anything.

Collectives™ on Stack Overflow

React: Mapping through and rendering from nested object

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related