Search⌘ K
Home
Courses
Building User Interfaces and Functions with TypeScript and React

Creating a Search Input

Explore how to build a SearchInput React component using TypeScript. Learn to manage state with useState, pass search queries to parent components, and integrate this input to filter displayed data dynamically.

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.

TypeScript 3.3.4
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 ...