[{"a": 1000}, {"b": 2000}, {"c": 3000}, {"d": 4000}, {"e": 6000}, {"f": 7000}]
Using this data I want to make a list in react-native application like
a 1000
b 2000
c 3000
d 4000
e 5000
f 6000
Thanks in advance
-
Ok, and what is the problem you are facing? What's stopping you from achieve the desired result?Calvin Nunes– Calvin Nunes2020-11-17 13:21:20 +00:00Commented Nov 17, 2020 at 13:21
-
I don't know how to render it !!Bhupesh Kumar– Bhupesh Kumar2020-11-17 13:22:13 +00:00Commented Nov 17, 2020 at 13:22
-
So, please, start by watching some tutorials and documentations about react-native and FlatList. Then when you try it yourself and did not achieve what you expect, comeback to StackOverflow with the issue. I say that because of the community rules of SO, read How to Ask and minimal reproducible exampleCalvin Nunes– Calvin Nunes2020-11-17 13:23:49 +00:00Commented Nov 17, 2020 at 13:23
-
Yes I know but see my data array first I don't have same key value pairs at all, that is desired in react-native flatlistBhupesh Kumar– Bhupesh Kumar2020-11-17 13:29:24 +00:00Commented Nov 17, 2020 at 13:29
-
So why don't you show us what you've tried until now and then we can help you? As I said, if you read How to Ask and minimal reproducible example you'll understand that you should add your codeCalvin Nunes– Calvin Nunes2020-11-17 13:32:58 +00:00Commented Nov 17, 2020 at 13:32
|
Show 1 more comment
1 Answer
Try this way
import React from 'react';
import { SafeAreaView, View, FlatList, StyleSheet, Text, StatusBar } from 'react-native';
const DATA = [{"a": 1000}, {"b": 2000}, {"c": 3000}, {"d": 4000}, {"e": 6000}, {"f": 7000}];
const App = () => {
const renderItem = ({ item }) => {
const key = Object.keys(item);
const value = Object.values(item);
return (
<View style={{flexDirection:"row"}}>
<Text>{key[0]}</Text>
<Text>{value[0]}</Text>
</View>
);
}
return (
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={(item, index) => index.toString()}
/>
);
}
1 Comment
Nooruddin Lakhani
@Bhupesh did it worked? check I have updated my answer