CODEWITHSUNDEEP
arraysreactjsobjectreact-nativereact-redux
Ananda Bayu Putra Yudhistira
Ananda Bayu Putra Yudhistira

Reputation: 321

React Native object child mapping inside parent map

Is it possible to mapping child object from parent map?

I have data like this:

[
 {
  "hdr_name": "A",
  "detail": [
    {
      "dtl_name": "Aaron Bennet"
    },
    {
      "dtl_name": "Ali Connors"
    }
  ]
 },
 {
  "hdr_name": "B",
  "detail": [
    {
      "dtl_name": "Bradley Horowitz"
    },
    {
      "dtl_name": "Brian Sweetland"
    },
  ]
 }
]

I want to show the header name and detail name, I got the header name using map

{this.props.selcheckSheet.data.map((item, index) => {
  return (
     <ListItem itemDivider key={index} >
      <Body>
       <Text>{item.hdr_name}</Text>
      </Body>                          
     </ListItem>

     //How to loop detail in item.detail?

})}

So, how to get the item.detail and render to ListItem? I want to render view like this: React Native View

Upvotes: 2

Views: 901

Answers (1)

Sasha
Sasha

Reputation: 5944

Yes, sure, pretty similar on how you already done the parent:

{this.props.selcheckSheet.data.map((item, index) => {
  return (
     <ListItem itemDivider key={index} >
      <Body>
       <Text>{item.hdr_name}</Text>
      </Body>                          
     </ListItem>

     {item.detail.map((u,i) => 
        <ListItem itemDivider key={'' + index + i} >
          <Body>
            <Text>{u.dtl_name}</Text>
          </Body>                          
        </ListItem>
     )}

}))}

Upvotes: 2

Related Questions