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'));