cf.completefrontend

Write the codeEasy

Build a SearchBox whose Search button puts the cursor in the field

Build SearchBox: a search field labelled Search teas and a button labelled Search. Clicking the button moves the keyboard focus into the field, so the person can type straight away.

The field doesn't take the focus when the page loads. Clicking Search keeps whatever is already typed, and two SearchBoxes on one page each focus their own field.

Write this (SearchBox.jsx)
import { useRef } from "react";
 
export default function SearchBox() {
  // Make Search move the focus into the field.
  return (
    <div>
      <label>
        Search teas <input type="search" />
      </label>
      <button type="button">Search</button>
    </div>
  );
}
The checks your code must pass
  • shows a field labelled Search teas and a Search button
  • doesn't focus the field when it first shows
  • clicking Search focuses the field
  • what you type after clicking Search goes into the field
  • clicking Search again keeps the text and the focus
  • each SearchBox focuses its own field

The answer

Write it yourself first. Then compare it with a reference solution and the checks it passes.

Checking your sign-in…