How to Filter List in React: Simple Guide with Examples

In React, you filter a list by using the JavaScript filter() method on your array and storing the filtered result in state with useState. Then, render the filtered list in your component to show only the items that match your filter condition.

Syntax

To filter a list in React, you use the filter() method on an array. This method takes a function that returns true for items you want to keep and false for items to remove. You usually combine this with React's useState to store and update the filtered list.

Example parts:

• array.filter(item => condition): returns a new array with items matching the condition.
• useState: React hook to hold the filtered list or filter criteria.
• Render the filtered array inside JSX to show the filtered items.

javascript

const [filterText, setFilterText] = React.useState('');
const filteredList = list.filter(item => item.includes(filterText));

Example

This example shows a React component that filters a list of fruits as you type in an input box. It updates the displayed list to only show fruits containing the typed text.

javascript

import React, { useState } from 'react';

function FruitFilter() {
  const fruits = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry', 'Fig', 'Grape'];
  const [filterText, setFilterText] = useState('');

  const filteredFruits = fruits.filter(fruit =>
    fruit.toLowerCase().includes(filterText.toLowerCase())
  );

  return (
    <div>
      <input
        type="text"
        placeholder="Type to filter fruits"
        value={filterText}
        onChange={e => setFilterText(e.target.value)}
        aria-label="Filter fruits"
      />
      <ul>
        {filteredFruits.map(fruit => (
          <li key={fruit}>{fruit}</li>
        ))}
      </ul>
    </div>
  );
}

export default FruitFilter;

Output

<input placeholder="Type to filter fruits" />
<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
  <li>Date</li>
  <li>Elderberry</li>
  <li>Fig</li>
  <li>Grape</li>
</ul>

Common Pitfalls

Common mistakes when filtering lists in React include:

• Not using toLowerCase() or similar to make filtering case-insensitive.
• Mutating the original list instead of creating a new filtered array.
• Filtering directly in the render without memoization, causing performance issues on large lists.
• Not updating state properly, leading to stale or incorrect filtered results.

javascript

/* Wrong: mutating original list (do not do this) */
const filtered = fruits;
filtered.splice(0, filtered.length, ...fruits.filter(f => f.includes(filterText)));

/* Right: create new filtered array without mutation */
const filtered = fruits.filter(f => f.includes(filterText));

Quick Reference

Tips for filtering lists in React:

• Use filter() to create a new filtered array.
• Store filter input in state with useState.
• Make filtering case-insensitive with toLowerCase().
• Render filtered list inside JSX with map().
• Keep original list immutable to avoid bugs.

Key Takeaways

Use JavaScript's filter() method combined with React state to filter lists dynamically.

Always create a new filtered array without changing the original list to avoid bugs.

Make filtering case-insensitive for better user experience using toLowerCase().

Update filter criteria in state and render the filtered list inside JSX.

Avoid filtering directly in render for large lists to improve performance.