How to Filter Array of Objects in React Native App?
Aug 01, 2022 . Admin
We are using map() function for display data in loop. sometimes we need to filter map loop in react native then there is a method to filter in map. but we can use filter() to filter json array in react native app.
In this example, we will take users with different countries, then we will only display "India" and "USA" country users. other country users will skip. so let's see below example.
Step 1: Download ProjectIn the first step run the following command to create a project.
expo init ExampleAppStep 2: App.js
In this step, You will open the App.js file and put the code.
import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View } from 'react-native'; import {useState,useEffect} from 'react'; export default function App() { /*------------------------------------------ -------------------------------------------- Users Lists -------------------------------------------- --------------------------------------------*/ const users = [ {id: 1, name: 'Hardik', country: 'India'}, {id: 2, name: 'Vimal', country: 'India'}, {id: 3, name: 'Harshad', country: 'Canada'}, {id: 4, name: 'Keval', country: 'Denmark'}, {id: 5, name: 'Savan', country: 'USA'}, ]; return ( <View style={styles.container}> {users .filter(user => { return ( user.country === 'India' || user.country === 'USA' ); }) .map((user, index) => { return ( <div key={index}> <h2>Name: {user.name}</h2> <h2>Country: {user.country}</h2> <hr /> </div> ); })} </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, });Step 3: Run Project
In the last step run your project using the below command.
expo start
You can QR code scan in Expo Go Application on mobile.
Output:
It will help you...