How to create a search textbox filter in React?

Question

How to create a search textbox filter in React?

Answer

Use useState to capture input and filter() to show matching items.

import { useState } from 'react';

function SearchFilter() {
  const [query, setQuery] = useState('');
  const items = ['React', 'Vue', 'Angular', 'Svelte'];

  const filtered = items.filter((item) =>
    item.toLowerCase().includes(query.toLowerCase())
  );

  return (
    <div>
      <input
        placeholder='Search...'
        value={query}
        onChange={(e) => setQuery(e.target.value)}
      />

      <ul>
        {filtered.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

Real-World Example

Used in:

• Searchable lists
• Product filters
• User management panels

Quick Practice

Create a searchable “Developer Skills” list with live filtering.

Summary

Use filter() with state to create instant client-side search features.