What Filter Does The Hoover React Use

How to filter an array in React with examples.

How can nosotros utilize React to filter an array? What is filter in React? I'll respond all of these questions plus prove you some examples to go y'all started.

What is Filter in React?

Filtering in React is pretty much what it says information technology is. It's the procedure of looping through an assortment and including or excluding elements inside that array based on a status that yous provide.

The caveat here is that we're not really filtering using React. Filter is a JavaScript role that we can perform on an assortment blazon object. Recollect, nosotros use JavaScript to write React. None of these methods are special to React. React is only the UI library.

Example one: Filter an Array of Strings in React

This kickoff example is quite a common scenario. Moving-picture show the scene: you're creating a search filter component to allow your users to search a list of names.

Your users type into a text field to filter that assortment of names based on what they're typing into that text field. It'due south quite a common input element these days.

Let's start off with a difficult-coded array of strings. Names that y'all might recognize (plus a small addition):

                                          const                names                =                [                'James'                ,                'John'                ,                'Paul'                ,                'Ringo'                ,                'George'                ]                ;

Let's assume that y'all want to only brandish names that include the letter 'J' in them.

To exercise that, we employ the filter function. We tin can perform the filter function inside of our JSX in a React component like so:

                                                                                <div                  >                                                                {names.                filter                (name                =>                name.                includes                (                'J'                )                )                .                map                (filteredName                =>                (                                                      <li                  >                                                                {filteredName}                                                                                      </li                  >                                )                )                }                                                                                      </div                  >

Let's suspension down the code above.

First, nosotros define our JSX within by opening a new curly subclass inside of a <div> element. Then, we specify the array for which nosotros desire to perform the filter function on.

Because we are performing a part nosotros open up up a set of parentheses. This is where nosotros want to gear up our status for the filter: in this case, if the element in the array includes the letter 'J'.

Did yous know that you lot tin chain array function in JavaScript, such equally filter , map , and reduce ? This tin can save many lines of lawmaking, although information technology may be difficult to understand for those new to coding.

Finally, nosotros perform another function after the filter office: the map function. This is how nosotros can output the array elements that match the filter condition to the bodily user interface inside of li tags.

Permit's see the complete React component code:

                                          import                React                from                'react'                ;                const                names                =                [                'James'                ,                'John'                ,                'Paul'                ,                'Ringo'                ,                'George'                ]                ;                role                App                (                )                {                return                (                                                      <div                  >                                                                {names.                filter                (name                =>                name.                includes                (                'J'                )                )                .                map                (filteredName                =>                (                                                      <li                  >                                                                {filteredName}                                                                                      </li                  >                                )                )                }                                                                                      </div                  >                                )                ;                }                export                default                App;

A quick tip that I thought worth mentioning: notice how I write the names array announcement outside of the React component? That'south considering I don't need the array to be alleged each fourth dimension the component re-renders (which will exist a lot).

Case 2: Filter an Array of Objects by Value in React

Let's explore how to filter an array of objects in React, based on a value inside of those objects. It'due south similar to what nosotros did previously with the array of strings, just with an extra step.

Our array of names has expanded, so I renamed the array to be named people. It now looks like this:

                                          const                people                =                [                {                name:                'James'                ,                age:                31                ,                }                ,                {                proper noun:                'John'                ,                historic period:                45                ,                }                ,                {                name:                'Paul'                ,                age:                65                ,                }                ,                {                name:                'Ringo'                ,                age:                49                ,                }                ,                {                proper noun:                'George'                ,                age:                34                ,                }                ]                ;

A direct-up array of objects. Each person object contains a name value and an age value.

Then how practise we filter an array of objects by value in React?

                                                                                <div                  >                                                                {people.                filter                (person                =>                person.historic period                <                60                )                .                map                (filteredPerson                =>                (                                                      <li                  >                                                                {filteredPerson.name}                                                                                      </li                  >                                )                )                }                                                                                      </div                  >

It'southward very similar to before, merely with an extra stride of declaring what value inside of the person object we want to filter on:

                          people.filter                (person => person.age < sixty)

See above we change the condition to compare the value of age to come across if information technology is less than 60. That filter function will loop through every object in the people array and check the value of age inside each object to bank check if it is less than 60.

If it is, so we include it in the next stride, which is to map those filtered objects out.

Let's come across the entire React component that filters an array of objects past a value inside of the object:

                                          import                React                from                'react'                ;                const                people                =                [                {                name:                'James'                ,                age:                31                ,                }                ,                {                name:                'John'                ,                historic period:                45                ,                }                ,                {                name:                'Paul'                ,                historic period:                65                ,                }                ,                {                name:                'Ringo'                ,                age:                49                ,                }                ,                {                proper noun:                'George'                ,                age:                34                ,                }                ]                ;                part                App                (                )                {                return                (                                                      <div                  >                                                                {people.                filter                (person                =>                person.age                <                60                )                .                map                (filteredPerson                =>                (                                                      <li                  >                                                                {filteredPerson.proper name}                                                                                      </li                  >                                )                )                }                                                                                      </div                  >                                )                ;                }                export                default                App;

If you enjoyed this tutorial or take any questions on how to employ filter in React, leave a annotate below and I'll respond!

Additionally, if you are getting started in React, why not check out my tutorial on how to create your first React component.