How to Filter a List in React

1. Working with External Data in React
2. Inline Data Filtering in React
3. More Readable Data Filtering in React

React is a front-end library that builds beautiful interfaces with reusable components. However, UI elements need to be filled in with actual information, visual, audio, or other content.

Most applications built in React receive data from the back-end server via an API.

Working with External Data in React

Before you can use the data to fill in the gaps in your components, first, you must store it in the local state of the application.

Sometimes, the parent component receives and stores the data and passes it down to its children via props. The data structure received from the API varies depending on the type of data and other factors.

When developing an app, it’s not unusual to receive an array of objects, and you have to create UI elements based on that data.

For instance, you could receive data that describes a product, and it will be your job to create reusable components that accept raw data as an input and display it as a product listing.

In some cases, you want to display only a certain subset of data conditionally. For instance, if we continue with the product example, you might not want to display out-of-stock products.

You can use the .filter() array method, introduced in ES6, to set a condition and only display products that meet that condition.

If you decide to utilize the .filter() method, you’ll do client-side filtering. Alternatively, you can filter the data on the server and source the already filtered data.

Inline Data Filtering in React

Let’s continue with our example of product data and imagine the state of our component contains an array of objects that describe a single product - price, name, description, and availability.

Let’s look at an example:

export default function App() {
  const [productData, setProductData] = useState([
    {
      price: 10,
      name: "Apple",
      description: "Tasty fruit!",
      available: true
    },
    {
      price: 15,
      name: "Pear",
      description: "Juicy pear straight from the farm",
      available: true
    },
    {
      price: 8,
      name: "Banana",
      description: "Banana from the tropics",
      available: false
    }
  ]);
  return (
    <div className="App">
      {productData
        .filter((product) => product.available === true)
        .map((fruit) => (
          <h2>
            {fruit.name} - {fruit.price + "$"}
          </h2>
        ))}
    </div>
  );
}

There’s a lot to unpack here. First, we have product data stored in the productData state variable, which is, by default, set to the value passed as an argument to the useState() hook.

Afterward, there’s a tricky piece of code between the opening and closing <div> tags. Let’s explain the curly braces.

We use them to tell JSX that the code between curly braces should be interpreted as a JavaScript expression, not as plain HTML. In this case, we call the filter() method on the productData array, so the curly braces are necessary.

The next step is to write a callback function for the .filter() method. This is where we set up a condition to filter the list.

In this case, our callback accepts one argument with an arbitrary name product. It can be anything else and checks if the available property of the object is true.

Ultimately, the .filter() method will return a new array, consisting of items from the original array that satisfied the criteria.

That’s why we call the .map() method on the result of the .filter() method. We want to take each array item and display their values as a <h2> text.

You can play with the code and check the output on CodeSandbox.

More Readable Data Filtering in React

If you think the solution above is overly complex and hard to understand, you’re not alone. To make your code more readable, you can create a new variable, filteredFruits outside of JSX, and use it to store the filtered values.

Then you can call .map() on the filtered array, and the code within JSX will look much cleaner. Let’s look at an example:

export default function App() {
  const [productData, setProductData] = useState([
    {
      price: 10,
      name: "Apple",
      description: "Tasty fruit!",
      available: true
    },
    {
      price: 15,
      name: "Pear",
      description: "Juicy pear straight from the farm",
      available: true
    },
    {
      price: 8,
      name: "Banana",
      description: "Banana from the tropics",
      available: false
    }
  ]);
  const filteredProducts = productData.filter((product) => product.available === true)
  return (
    <div className="App">
      {filteredProducts.map((fruit) => (
          <h2>
            {fruit.name} - {fruit.price + "$"}
          </h2>
        ))}
    </div>
  );
}

This approach is cleaner and easier to understand, especially for beginners.