CODEWITHSUNDEEP
reactjsreact-nativeloopsobjectnested
daxidngyn
daxidngyn

Reputation: 59

React: Mapping through and rendering from nested object

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?

Upvotes: 0

Views: 91

Answers (2)

Anas Ansari
Anas Ansari

Reputation: 141

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.

Upvotes: 2

Szymon Pancerz
Szymon Pancerz

Reputation: 237

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.

Upvotes: 2

Related Questions