Guided reviewBasic

Search on button click

Build a component that filters the list ['React', 'Node', 'JavaScript'] only when the “Search” button is clicked (the form is submitted), not on every keystroke.

React components can't be run automatically here. Write the solution in the editor, check it in your own project and compare it with the checklist.

You will practise

Separate the typed text from the submitted query
Handle a form in React

Related questions

Source: Full Stack / JS — task card — The task and reference solution come from the card.

Not run automatically — compare with the checklist

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

export default function Search() {
  // Your solution
}

Tab indents · Esc, then Tab, leaves the editor · Your code is saved in this browser.

The typed text and the submitted query are separate pieces of state
The filter changes only after the form is submitted
Submitting the form doesn't reload the page (preventDefault)
The field has a label
An empty list of results shows a message

0 of 5 checked

Hints

Stuck? Hints go from gentle to specific.

Reference solution

Give it a real try first — the solution is most useful after you've struggled a bit.