Flatlist Looping through nested array in React Native

Question

I'm trying to loop through a nested array in my React native app.

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

Now what I'm trying to do is to only display the data from newRow in each object from the row array

using { item.newRow[0].name } does work I want to loop trough newRow to display all the newRows

How can I loop through all the rows and get all newRows to be displayed?

Example array:

  {
    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'},

Example 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}) => newRow

export default class App extends Component {

  renderItem = ({item}) => {
    return (
      <Text style={styles.row}>
        {item.text}
      </Text>
    )
  }

  renderLoop = ({item}) => {
   var items= [];

    for(let i = 0; i < item; i++){

      items.push(
        <View key = {i}>
          <View>
           <Text style={styles.row}>
            {item.text}
          </Text>
          </View>
          <View>

          </View>
          <View>

          </View>
        </View>
      )
    }
  }

  render(

  ) {
    return (
      <View  style={styles.container}>

      <FlatList
        style={styles.container}
        data={rows}
        renderItem={this.renderItem}
        keyExtractor={extractKey}
      />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    marginTop: 20,
    flex: 1,
  },
  row: {
    padding: 15,
    marginBottom: 5,
    backgroundColor: 'skyblue',
  },
})

Example App

Take a look at Lodash flatten and flattenDeep functions for inspiration. — Yuriy Rypka
– Yuriy Rypka, Commented Jan 27, 2019 at 17:20

Andrew · Accepted Answer · 2019-01-27 17:39:53Z

8

It sounds like you are looking at including the items from your newRow array inside the row that you are creating in your FlatList.

This can be achieved by updating your renderItem function to something like this

renderItem = ({item}) => {
  let items = [];
  if( item.newRow) {
    items = item.newRow.map(row => {
      return <Text>{row.text}</Text>
    })
  } 

  return (
    <View>
      <Text style={styles.row}>
        {item.text}
      </Text>
      {items}
    </View>
  )
}

What I am doing is

Create an empty array for holding the mapped newRow items
Check that the newRow array exists
If it exists then I am mapping it to an array
Update the return function so that it returns all the items

Here is a snack with the working code https://snack.expo.io/@andypandy/flatlist-with-nested-array

edited Jan 27, 2019 at 17:39

answered Jan 27, 2019 at 17:34

Andrew

28.7k9 gold badges95 silver badges108 bronze badges

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

Comments

ShridharBavannawar · Accepted Answer · 2019-01-27 17:33:43Z

2

FlatList component will loop through your row dataset. You can pass entire row object in the renderItem and return a component with newRow as dataset.

<FlatList
   style={styles.container}
   data={rows}
   keyExtractor={extractKey}       
   renderItem={rowsProps=> {
     return <ListItem {...rowsProps} />;
   }}
 />

Where ListItem will have access to each element of row. ListItem can something be like

  const ListItem = (props) => {
       return 
          <View>
            {props.newRow.map(newProp => {
              return <View>newProp.text</View>;
            })}
          </View>

    }

answered Jan 27, 2019 at 17:33

ShridharBavannawar

1721 gold badge4 silver badges13 bronze badges

Collectives™ on Stack Overflow

Flatlist Looping through nested array in React Native

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related