title: Flatlist Looping through nested array in React Native
body: <p>I'm trying to loop through a nested array in my React native app.</p>
  
  <p>I tried using a for loop, but that didn't work. I am still new to React so I'm not that familiar with how to loop</p>
  
  <p>Now what I'm trying to do is to only display the data from <code>newRow</code> in each object from the <code>row</code> array</p>
  
  <p>using <code>{ item.newRow[0].name }</code> does work I want to loop trough <code>newRow</code> to display all the newRows</p>
  
  <p>How can I loop through all the rows and get all <code>newRows</code> to be displayed?</p>
  
  <p>Example array:</p>
  
  <pre><code>  {
      id: 0, 
      text: 'View',
      newRow: [
      {id: 0, text: 'View'},
      {id: 1, text: 'Text'},
      {id: 2, text: 'Image'},
      {id: 3, text: 'ScrollView'},
      {id: 4, text: 'ListView'},
      ]
    },
    {id: 1, text: 'Text',
      newRow: [
      {id: 0, text: 'View'},
      {id: 1, text: 'Text'},
      {id: 2, text: 'Image'},
      {id: 3, text: 'ScrollView'}, 
      {id: 4, text: 'ListView'},
      ]
    },
    {id: 2, text: 'Image'},
    {id: 3, text: 'ScrollView'},
    {id: 4, text: 'ListView'},
  </code></pre>
  
  <p>Example Code:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { FlatList, Text, StyleSheet,View } from 'react-native';
  
  const rows = [
    {
      id: 0, 
      text: 'View',
      newRow: [
      {id: 0, text: 'View'},
      {id: 1, text: 'Text'},
      {id: 2, text: 'Image'},
      {id: 3, text: 'ScrollView'},
      {id: 4, text: 'ListView'},
      ]
    },
    {id: 1, text: 'Text',
      newRow: [
      {id: 0, text: 'View'},
      {id: 1, text: 'Text'},
      {id: 2, text: 'Image'},
      {id: 3, text: 'ScrollView'}, 
      {id: 4, text: 'ListView'},
      ]
    },
    {id: 2, text: 'Image'},
    {id: 3, text: 'ScrollView'},
    {id: 4, text: 'ListView'},
  
  ]
  
  // const rowsNewRow = rows[i].newRow
  
  const extractKey = ({newRow}) =&gt; newRow
  
  export default class App extends Component {
  
    renderItem = ({item}) =&gt; {
      return (
        &lt;Text style={styles.row}&gt;
          {item.text}
        &lt;/Text&gt;
      )
    }
  
    renderLoop = ({item}) =&gt; {
     var items= [];
  
      for(let i = 0; i &lt; item; i++){
  
        items.push(
          &lt;View key = {i}&gt;
            &lt;View&gt;
             &lt;Text style={styles.row}&gt;
              {item.text}
            &lt;/Text&gt;
            &lt;/View&gt;
            &lt;View&gt;
  
            &lt;/View&gt;
            &lt;View&gt;
  
            &lt;/View&gt;
          &lt;/View&gt;
        )
      }
    }
  
    render(
  
    ) {
      return (
        &lt;View  style={styles.container}&gt;
  
        &lt;FlatList
          style={styles.container}
          data={rows}
          renderItem={this.renderItem}
          keyExtractor={extractKey}
        /&gt;
        &lt;/View&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      marginTop: 20,
      flex: 1,
    },
    row: {
      padding: 15,
      marginBottom: 5,
      backgroundColor: 'skyblue',
    },
  })
  </code></pre>
  
  <p><a href="https://snack.expo.io/@salman15/flatlist?session_id=snack-session-34Z4dLntx" rel="nofollow noreferrer">Example App</a></p>