Question

0

48

Vistas

Rendering a list within a list in React Native

I am trying to render a list with a two sub data arrays within each object. I am trying to display this array of game objects, that has a gameTitle, an array for publishers, an array for Developers and an id. The array for publishers and developers is not the same for every game. At first I wanted to make a sectionList, but there are two data sets, which is what I believe is the problem in not working. So now I am thinking of making a flatlist and making either a flatlist or sectionlist within that for both the publisher and developer arrays. I still can't figure out how to do this though. What should I be trying to do instead?

creatorData:  Array [
  Object {
    "DevData": Array [
      Object {
        "Developer": "DICE",
      },
    ],
    "GameTitle": "Battlefield 1",
    "PubData": Array [
      Object {
        "Publisher": "Electronic Arts",
      },
    ],
    "id": 0,
  },
  Object {
    "DevData": Array [
      Object {
        "Developer": "DICE",
      },
      Object {
        "Developer": "DICE Los Angeles",
      },
    ],
    "GameTitle": "Battlefield 4",
    "PubData": Array [
      Object {
        "Publisher": "Electronic Arts",
      },
    ],
    "id": 1,
  }]

7 months ago · Juan Pablo Isaza

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-06-25T07:01:12.407Z

Hey so basically a Flatlist inside a flatlist will work, but we need to make sure that the childs flatlist doesnt always override the parent flatlists scroll.

So for that basically suppose

  const data = [{a:{ childData:[] }} , {b:{childData:[]}} ]
   const renderEachRow = ({item}) => {
     return(
      <View style={{height:HEIGHT_DEVICE/3,marginHorizontal:30}} >
       <Text>Title</Text>
       <Flatlist data={item.childData} renderItem={renderChildRow} />
      </View>
     )

    return(
<View style={{flex:1}}>
    <FLatlist data={data} renderItem={renderEachRow}
     style={{flex:1}}
     />
    )
</View>

  }

Hope this helps, feel free for doubts