title: Unable to loop and render FlatList inside .map function react-native
body: <p>I am trying to render a FlatList inside a component. The Component itself is inside a ScrollView.</p>
  
  <p>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.</p>
  
  <p>Here's my code: </p>
  
  <pre><code>    renderComp(){
  
          const { filtersView,cats,cats_title, clearStyle} = styles;
  
          const data = this.props.ingreds;
  
          const arr  = Object.entries(data);
  
  
          return arr.map(i=&gt; { 
                const name= i[0]; 
                const items_obj = i[1];
                const items = Object.values(items_obj);
  
                return(
  
                  &lt;View key={name} style= {filtersView}&gt;
  
                      &lt;View style={cats}&gt;
  
                        &lt;Text  style ={cats_title}&gt;{name}&lt;/Text&gt;
  
                        &lt;Text style={clearStyle}&gt;Clear All&lt;/Text&gt;
                      &lt;/View&gt;
  
  
                      &lt;View style={{justifyContent:'flex-start', alignItems:'flex-start'}}&gt;
  
                        &lt;FlatList 
                        style={{ marginRight:6}}  
                        data={items}
                        keyExtractor={(x,i)=&gt; i.toString()}
                        renderItem={({item}) =&gt;{
                        this.renderItems(item)
                        }}
                        /&gt;
                      &lt;/View&gt; 
                    &lt;/View&gt;
  
                )
          })
  
        }
  </code></pre>
  
  <p>And here's the ScrollView Component:</p>
  
  <pre><code>        &lt;ScrollView contentContainerStyle={{alignItems:'flex-start', 
          justifyContent:'flex-start',flex:1, height:72}} &gt;
  
              {this.renderComp()}
  
          &lt;/ScrollView&gt;
  </code></pre>
  
  <p>And The loop stops after one iteration.</p>
  
  <p>Here's the output: <a href="https://i.stack.imgur.com/yM151.png" rel="nofollow noreferrer">https://i.stack.imgur.com/yM151.png</a></p>
  
  <p>Any suggestions?</p>