Zadanie: wyszukiwanie przyciskiem

Najpierw odpowiedz na głos lub w myślach, potem porównaj.

Odpowiedź

Oddzielam wpisywany tekst od zatwierdzonego zapytania. Dzięki temu filtr zmienia się po wysłaniu formularza, a nie po każdym znaku.

JSX

import { useState } from 'react';
const items = ['React', 'Node', 'JavaScript'];

export default function Search() {
  const [input, setInput] = useState('');
  const [query, setQuery] = useState('');
  const results = items.filter(item =>
    item.toLowerCase().includes(query.toLowerCase())
  );
  return <>
    <form onSubmit={e => { e.preventDefault(); setQuery(input.trim()); }}>
      <label>Szukaj <input value={input} onChange={e => setInput(e.target.value)} /></label>
      <button type="submit">Szukaj</button>
    </form>
    <ul>{results.map(item => <li key={item}>{item}</li>)}</ul>
    {!results.length && <p>Brak wyników</p>}
  </>;
}

Pułapka: filtrowanie bezpośrednio po stanie inputa nie realizowałoby wymogu wyszukiwania dopiero przyciskiem.

Jak poszło? Bądź szczery — „Jeszcze nie” dodaje pytanie do powtórki.

Przećwicz w kodzie

Wyszukiwanie przyciskiem — samodzielna ocena z listą kontrolną