Navigate back to the homepage

How to filter array in react native

Infinitbility
React Native
August 11th, 2021 · 1 min read
How to filter array in react native

Hello Friends 👋,

Welcome To Infinitbility! ❤️

When you develop react native application, many times you will need to filter data and show filtered data to the user. now we are going to see how we can filter data in react native.

As we know, React native uses javascript codebase and javascript provides a filter() function to filter array and JSON and return only those data which match your condition in filter time.

For example, the below example can show only those numbers which are greater than 9.

1import React, { useRef } from 'react';
2import { View, Text, TextInput } from 'react-native';
3
4export const ReactNativeComponents = () => {
5
6 const array = [ 8, 5, 67, 10, 12 ]
7 const largerThanNine = array.filter( number => {
8 return number > 9
9 })
10
11
12 return (
13 <View>
14 <Text>React Examples</Text>
15
16 { largerThanNine.map(number => <Text>{number}</Text>) }
17 </View>
18 )
19}

For more clearance, we have will show only those data match strings because many times we need to be used based search that below example done for you.

1import React, { useRef } from 'react';
2import { View, Text, TextInput } from 'react-native';
3
4export const ReactNativeComponents = () => {
5
6 const tasks = [
7 {
8 taskId : 1,
9 taskName : 'Clean the bathroom',
10 taskStatus: 'Complete'
11 },
12 {
13 taskId : 2,
14 taskName : 'Learn filtering data in React',
15 taskStatus: 'To do'
16 },
17 {
18 taskId : 3,
19 taskName : 'Fix the bug on React project',
20 taskStatus: 'To do'
21 },
22 {
23 taskId : 4,
24 taskName : 'Fix the car',
25 taskStatus: 'Complete'
26 }
27 ];
28
29 let searcString = "project";
30 const searchData = tasks.filter( task => task.taskName.includes(searcString))
31
32 return (
33 <View>
34 <Text>React Examples</Text>
35
36 { searchData.map(item => <Text>{item.taskName}</Text>) }
37 </View>
38 )
39}

For show search data we have used filter() and includes() function.

  • filter() for select those data whitch get search true by includes() function.
  • includes() for search same string on object string data.

Thanks for reading…

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Tutorials

React Native

Categories

More articles from Infinitbility

How to focus textinput in react native

How to focus textinput in react native

React Native focus textinput Example

August 11th, 2021 · 1 min read
How to encode a URL in react native

How to encode a URL in react native

React Native encode URL Example

August 10th, 2021 · 1 min read
© 2020–2021 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]