How to Search and Filter a List in React Easily

In React, you can search and filter a list by storing the search term in useState and filtering the list array with Array.filter() based on that term. Update the displayed list dynamically as the user types in an input field.

Syntax

To filter a list in React, use these parts:

• useState to keep the search text.
• onChange event on an input to update the search text.
• Array.filter() to create a new list matching the search.
• Render the filtered list in JSX.

jsx

const [searchTerm, setSearchTerm] = useState('');

const filteredList = list.filter(item =>
  item.toLowerCase().includes(searchTerm.toLowerCase())
);

return (
  <>
    <input
      type="text"
      value={searchTerm}
      onChange={e => setSearchTerm(e.target.value)}
      placeholder="Search..."
    />
    <ul>
      {filteredList.map(item => <li key={item}>{item}</li>)}
    </ul>
  </>
);

Example

This example shows a list of fruits filtered by the search input. Typing filters the list in real time.

jsx

import React, { useState } from 'react';

export default function FruitFilter() {
  const [searchTerm, setSearchTerm] = useState('');
  const fruits = ['Apple', 'Banana', 'Orange', 'Mango', 'Grapes'];

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

  return (
    <div>
      <input
        type="text"
        placeholder="Search fruits"
        value={searchTerm}
        onChange={e => setSearchTerm(e.target.value)}
        aria-label="Search fruits"
      />
      <ul>
        {filteredFruits.length > 0 ? (
          filteredFruits.map(fruit => <li key={fruit}>{fruit}</li>)
        ) : (
          <li>No fruits found</li>
        )}
      </ul>
    </div>
  );
}

Output

Input box with placeholder 'Search fruits' and a list below showing fruits filtered by input text.

Common Pitfalls

Common mistakes when filtering lists in React include:

• Not normalizing case, causing search to miss matches.
• Filtering the original list inside render without memoization, causing performance issues.
• Not handling empty or no-match results gracefully.
• Using array index as key which can cause rendering bugs.

jsx

/* Wrong: Case sensitive search misses matches */
const filtered = list.filter(item => item.includes(searchTerm));

/* Right: Normalize case for search */
const filtered = list.filter(item =>
  item.toLowerCase().includes(searchTerm.toLowerCase())
);

Quick Reference

• Use useState to store search input.
• Use onChange on input to update state.
• Filter list with Array.filter() and String.includes().
• Normalize case with toLowerCase() for better matching.
• Render filtered list with unique keys.

Key Takeaways

Store the search term in React state using useState.

Filter your list array with Array.filter() based on the search term.

Normalize text case to make search case-insensitive.

Update the displayed list dynamically as the user types.

Always use unique keys when rendering list items.