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.

import React, { useRef } from 'react';
import { View, Text, TextInput } from 'react-native';

export const ReactNativeComponents = () => {

    const array = [ 8, 5, 67, 10, 12 ]
    const largerThanNine = array.filter( number => {
        return number > 9
    })


    return (
        <View>
            <Text>React Examples</Text>

            { largerThanNine.map(number => <Text>{number}</Text>) }
        </View>
    )
}

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.

import React, { useRef } from 'react';
import { View, Text, TextInput } from 'react-native';

export const ReactNativeComponents = () => {

     const tasks = [
        {
            taskId : 1,
            taskName : 'Clean the bathroom',
            taskStatus: 'Complete'
        },
        {
            taskId : 2,
            taskName : 'Learn filtering data in React',
            taskStatus: 'To do'
        },
        {
            taskId : 3,
            taskName : 'Fix the bug on React project',
            taskStatus: 'To do'
        },
        {
            taskId : 4,
            taskName : 'Fix the car',
            taskStatus: 'Complete'
        }
    ];

    let searcString = "project";
    const searchData = tasks.filter( task => task.taskName.includes(searcString))

    return (
        <View>
            <Text>React Examples</Text>

            { searchData.map(item => <Text>{item.taskName}</Text>) }
        </View>
    )
}

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…