-1
[{"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

Bhupesh Kumar
  • 240
  • 2
  • 14
  • Ok, and what is the problem you are facing? What's stopping you from achieve the desired result? – Calvin Nunes Nov 17 '20 at 13:21
  • I don't know how to render it !! – Bhupesh Kumar Nov 17 '20 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 [ask] and [mcve] – Calvin Nunes Nov 17 '20 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 flatlist – Bhupesh Kumar Nov 17 '20 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 [ask] and [mcve] you'll understand that you should add your code – Calvin Nunes Nov 17 '20 at 13:32
  • You can take reference of this question. https://stackoverflow.com/questions/39965579/how-to-loop-an-object-in-react – Sandip Jangra Nov 17 '20 at 13:45

1 Answers1

0

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()}
      />
  );
}
Nooruddin Lakhani
  • 7,507
  • 2
  • 19
  • 39