CODEWITHSUNDEEP
javascriptreactjsreact-native
Hemendra Khatik
Hemendra Khatik

Reputation: 481

Object.values function is not returning JSX as expected

I've cart data structure like below and I want to iterate through it but for some reason it's not working properly as expected.

I want to print JSX but Object.values function is not returning anything.

cart =[
   {
      "PJIM09NH2":{
         "network_id":"VJEC5BU2",
         "id":"PJIM09NH2",
         "quantity":2,
         "size":"",
         "color":"",
         "image":"url-1",
         "name":"Ususus"
      }
   },
   {
      "361MPYLYK":{
         "network_id":"VJEC5BU2KM",
         "id":"361MPYLYK",
         "quantity":2,
         "size":"",
         "color":"",
         "image":"url-3",
         "name":"Lenovo"
      }
   },
   {
      "0OWQRQA4U":{
         "network_id":"VJEC5BU2LM",
         "id":"0OWQRQA4U",
         "quantity":2,
         "size":"",
         "color":"",
         "image":"url-4",
         "name":"Free I phone"
      }
   }
]

I'm trying to iterate through above data like below example but it's not returning JSX as I want

<View>
  {this.cart.map((cart, index) => {

   Object.values(cart).map((item) => {

   // here alert is working
     alert(JSON.stringify(item.network_id))

   // here this is not returning anything
     return (
          <Text>product {item.network_id}</Text>
     );
   });
  })}
</View>

Upvotes: 1

Views: 365

Answers (1)

Arun Kumar Mohan
Arun Kumar Mohan

Reputation: 11915

You're not returning the result of the inner map call. So, an array of undefined is returned which React ignores. And you're missing adding a unique key prop to each element in the list.

{
  this.cart.map((cart) =>
    Object.values(cart).map((item) => (
      <Text key={item.id}>Product {item.network_id}</Text>
    ))
  )
}

CodeSandbox

Upvotes: 1

Related Questions