How can we use React to filter an array? What is filter in React? I’ll answer all of these questions plus show you some examples to get you started.

What is Filter in React?

Filtering in React is pretty much what it says it is. It’s the process of looping through an array and including or excluding elements inside that array based on a condition that you provide.

The caveat here is that we’re not actually filtering using React. Filter is a JavaScript function that we can perform on an array type object. Remember, we use JavaScript to write React. None of these methods are special to React. React is just the UI library.

Example 1: Filter an Array of Strings in React

This first example is quite a common scenario. Picture 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 array of names based on what they’re typing into that text field. It’s quite a common input element these days.

Let’s start off with a hard-coded array of strings. Names that you might recognize (plus a small addition):

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

Let’s assume that you want to only display names that include the letter ‘J’ in them.

To do that, we use the filter function. We 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 break down the code above.

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

Because we are performing a function we open up a set of parentheses. This is where we want to set our condition for the filter: in this case, if the element in the array includes the letter ‘J’.

Did you know that you can chain array function in JavaScript, such as filter, map, and reduce? This can save many lines of code, although it may be difficult to understand for those new to coding.

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

Let’s see the complete React component code:

import React from 'react';

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

function 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 declaration outside of the React component? That’s because I don’t need the array to be declared each time the component re-renders (which will be a lot).

Example 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’s similar to what we did previously with the array of strings, just with an extra step.

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

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

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

So how do we filter an array of objects by value in React?

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

It’s very similar to before, just with an extra step of declaring what value inside of the person object we want to filter on:

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

See above we change the condition to compare the value of age to see if it 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 check if it is less than 60.

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

Let’s see the entire React component that filters an array of objects by a value inside of the object:

import React from 'react';

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

function App() {
  return (
    <div>
      {people.filter(person => person.age < 60).map(filteredPerson => (
        <li>
          {filteredPerson.name}
        </li>
      ))}
    </div>
  );
}

export default App;

If you enjoyed this tutorial or have any questions on how to use filter in React, leave a comment below and I’ll reply!

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

👋 Hey, I'm James Dietrich

James Dietrich is an experienced web developer, educator, and founder of Upmostly.com, a platform offering JavaScript-focused web development tutorials. He's passionate about teaching and inspiring developers, with tutorials covering both frontend and backend development. In his free time, James contributes to the open-source community and champions collaboration for the growth of the web development ecosystem.