Building User Interfaces and Functions with TypeScript and React/

...

/

Creating a Search Input

Creating a Search Input

Create a search input React component that can provide a query via callback prop.

We'll cover the following...

It’s time to create a way for users to be able to provide input and take advantage of our powerful genericSearch function.

Creating a search input component

To get started, we’ll create a new React component called SearchInput. We’ll use both label and input HTML tags to build the SearchInput.

import * as React from "react";
export function SearchInput() {
  return (
    <>
      <label htmlFor="search" className="mt-3">
        Search here
      </label>
      <input
        id="search"
        className="form-control full-width"
        type="search"
        placeholder="Search..."
        aria-label="Search"
      />
    </>
  );
}

Now we need to make the JSX input element stateful. We’ll ...