Search Filter

A simple search filter for a list of items.

jsxCopy codeimport React, { useState } from 'react';
import ReactDOM from 'react-dom';

const items = ['Apple', 'Banana', 'Cherry', 'Date', 'Fig', 'Grape'];

function SearchFilter() {
  const [query, setQuery] = useState('');

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

  return (
    <div>
      <h1>Search Filter</h1>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search..."
      />
      <ul>
        {filteredItems.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

ReactDOM.render(<SearchFilter />, document.getElementById('root'));