Filter a List with Search Input

React

JavaScript

Technical Specification

Create a search box that filters a list of items in real-time.

Input/Output Samples

Input:Type 'js' in search

Output:Only items containing 'js' shown

Optimal Logic Path

import { useState } from "react";

const DATA = ["HTML", "CSS", "JavaScript", "React", "Node.js"];

function SearchList() {
  const [query, setQuery] = useState("");

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

  return (
    <div>
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search..."
      />
      <ul>
        {filtered.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

Architectural Deep-Dive

We derive filtered data based on the query instead of storing it separately in state.