Shoaib Khazer
2 min readAug 1, 2019

--

How to Render Object Array in React Native FlatList

Use Case:

  1. Convert object array into data dictionary
  2. Convert data dictionary into object array
  3. Remove duplicate entries from an object array
  4. Render a data dictionary in FlatList

We have an object array of users with duplicate values.

const users= [
{
"id": 1,
"name": "jhon",
"location": "USA",
"email": "jhon@xyz.com"
},
{
"id": 2,
"name": "doe",
"location": "UAE",
"email": "doe@xyz.com"
},
{
"id": 3,
"name": "alex",
"location": "Canada",
"email": "alex@xyz.com"
},
{
"id": 4,
"name": "bob",
"location": "North America",
"email": "bob@xyz.com"
},
{
"id": 5,
"name": "ali",
"location": "Pakistan",
"email": "ali@xyz.com"
},
{
"id": 5,
"name": "ali",
"location": "Pakistan",
"email": "ali@xyz.com"
},
{
"id": 2,
"name": "doe",
"location": "UAE",
"email": "doe@xyz.com"
},
{
"id": 3,
"name": "alex",
"location": "Canada",
"email": "alex@xyz.com"
},
];

we can convert this object array into dictionary using lodash keyBy function

_.keyBy(users, ‘id’)

--

--

Shoaib Khazer

JavaScript Engineer | React | React Native | Redux | Open Source