Snippet

Filtering an Array of Strings for Search Suggestions

Array.prototype.filter creates a new array containing only the elements that satisfy a provided callback condition. In this component, it narrows down the list of items based on the user's input query in real time.

snippet.js

javascript

import React, { useState } from 'react';
 
function SearchList({ items }) {
  const [query, setQuery] = useState('');
 
  const matchingItems = items.filter((item) =>
    item.toLowerCase().includes(query.toLowerCase())
  );
 
  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search..."
      />
      <ul>
        {matchingItems.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

react

Breakdown

const matchingItems = items.filter((item) =>

Applies the array filter method to iterate over each string element in the list.

item.toLowerCase().includes(query.toLowerCase())

Performs a case-insensitive check to see if the current string contains the search substring.

Previous snippet Next snippet

More Beginner JavaScript exercises →

Filtering an Array of Strings for Search Suggestions

Related