CODEWITHSUNDEEP
javascriptarraysreact-native
Lovepreet Singh
Lovepreet Singh

Reputation: 390

How to pass array to render in Flatlist in React Native

I am getting issue in rendering a Flatlist in React native. The array is the output from a Google sheet via Node express. The array example is

[["Fateh","25"],["Fateh","100"],["Ambuja","140"],["Utcl","50"]]

What i have tried so far:

setDoList(() => {
                return [
                  {col1 : responseText[0], col2:responseText[1] ,key: Math.random().toString()}
                ]
              })

But indentation is not working here. I even tried to converting array into JS objects by using { ... array}, it didn't helped. I am novice in the field of JS, please provide me direction to solve this.

Upvotes: 0

Views: 4855

Answers (2)

Goskula Jayachandra
Goskula Jayachandra

Reputation: 4201

In order to use array of arrays in flat list you can do something like this

export default function App(){    

    const array = ['["Fateh","25"]','["Fateh","100"]','["Ambuja","140"]','["Utcl","50"]'];

      return(
        <View style={styles.div}>
          <FlatList
            data={array}
            renderItem={({ item,index }) => {
                console.log("item is",item);
                var array = JSON.parse(item);
        return(
            <View style={{flexDirection:"row"}}>
            {array.map((item, key) => 
            {
                return(
                <View>
                  <Text> {item} </Text>
                </View>
              )
            })}
            </View>
        )
        } }
            keyExtractor={item => item.id}
          />
        </View>
      );

    }

You can use FlatList for each than you can use map inside it.

enter image description here

Hope this helps!

Upvotes: 2

Queens Coder
Queens Coder

Reputation: 464

On the React Native side. How about you use JSON.parse(data)before trying to access its properties or methods.

If it is a string you would need to convert it to an array of objects with JSON.parse().

Also, what does the data look like on the node js server-side before you send it to React Native? I know google sheets are known to do some strange things

Upvotes: 1

Related Questions