Unable to loop and render FlatList inside .map function react-native

Question

I am trying to render a FlatList inside a component. The Component itself is inside a ScrollView.

I am using map function to loop through the data to pass into the component. Earlier I was using ScrollView instead of FlatList. It was working fine, but was rendering slow. So I decided to use FlatList.

Here's my code:

    renderComp(){

        const { filtersView,cats,cats_title, clearStyle} = styles;

        const data = this.props.ingreds;

        const arr  = Object.entries(data);


        return arr.map(i=> { 
              const name= i[0]; 
              const items_obj = i[1];
              const items = Object.values(items_obj);

              return(

                <View key={name} style= {filtersView}>

                    <View style={cats}>

                      <Text  style ={cats_title}>{name}</Text>

                      <Text style={clearStyle}>Clear All</Text>
                    </View>


                    <View style={{justifyContent:'flex-start', alignItems:'flex-start'}}>

                      <FlatList 
                      style={{ marginRight:6}}  
                      data={items}
                      keyExtractor={(x,i)=> i.toString()}
                      renderItem={({item}) =>{
                      this.renderItems(item)
                      }}
                      />
                    </View> 
                  </View>

              )
        })

      }

And here's the ScrollView Component:

        <ScrollView contentContainerStyle={{alignItems:'flex-start', 
        justifyContent:'flex-start',flex:1, height:72}} >

            {this.renderComp()}

        </ScrollView>

And The loop stops after one iteration.

Here's the output: https://i.sstatic.net/yM151.png

Any suggestions?

jgoday · Accepted Answer · 2019-03-25 07:12:04Z

1

ReactNative FlatList renderItem method should return a ?React.Element component. In your case either use return this.renderItems or skip the inner brackets.

https://facebook.github.io/react-native/docs/flatlist#renderitem

({item}) => this.renderItems(item)}

answered Mar 25, 2019 at 7:12

jgoday

2,8461 gold badge19 silver badges18 bronze badges

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

7 Comments

Saumay Paul Over a year ago

Thanks!! That solved the FlatList rendering problem!!! But the renderComp() stops after one iteration. Now only one FlatList is being rendered.

jgoday Over a year ago

What are you trying to do with this arr.map ? create one FlatList for each array item ?

Saumay Paul Over a year ago

Yes! Render Components containing one FlatList

jgoday Over a year ago

If it's only one FlatList, you might want to avoid this map. Array.map will return a new array, applying a function over his items, so in your case, it will return a bunch of FlatList componentes. Return just one FlatList and pass the array to the data props. Am I wrong ?

jgoday Over a year ago

There can be many ways to achieve that, but you can use FlatList and return each food category component per main array item

|

Collectives™ on Stack Overflow

Unable to loop and render FlatList inside .map function react-native

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related