mapping id from json response to key and use it for FlatList react-native

Question

I have a json from an api response as below:

centres = [{
    id: 1,
    name: "DEF",
    },{
    id: 2,
    name: "ABC",
  }]

Now I want to populate that above data in a FlatList

return(
  <View>
    <FlatList
      data={this.state.centres}
      renderItem={({item}) => <CentreComponent centre={item}/>}
    />
  </View>
);

But I cant do the above as the data (centres) doesnt have a "key" property.

Now I can loop through each item in the array and add a property "key" which has the same value as ID. But I find this in efficient.

Is there a better way to map "id" column to "key" to render the FlatList

Possible duplicate of https://stackoverflow.com/questions/21148419/efficiently-rename-re-map-javascript-json-object-keys-within-array-of-objects — Dominik, Jul 11 '17 at 08:43
Hmm not exactly. The post mentions replace by parsing a string, while this is a JSON object. — Mateen-Hussain, Jul 11 '17 at 10:25

Dominik · Answer 1 · 2017-07-11T08:51:56.803

2

The fastes way I can see this happen is by iterating over the array.

const centres = [{
    id: 1,
    name: "DEF",
  },{
    id: 2,
    name: "ABC",
}];

const newCentres = centres.map( ( item ) => ({ key: item.id, name: item.name }) );

console.log( JSON.stringify( newCentres ) )
// [{"key":1,"name":""},{"key":2,"name":""}]

edited Jul 11 '17 at 08:51

answered Jul 11 '17 at 08:40

Dominik

6,078
8
37
61

score 1 · Accepted Answer · answered Jul 11 '17 at 09:14

1

Try using keyExtractor . Please update your code as:

return(
 <View>
  <FlatList
   data={this.state.centres}
   keyExtractor={(item, index) => item.id}
   renderItem={({item}) => <CentreComponent centre={item}/>}
  />
  </View>
);

answered Jul 11 '17 at 09:14

Rohan Kangale

931
4
11
29

mapping id from json response to key and use it for FlatList react-native

2 Answers2