Create your input search box

I will not be creating a separate file for my <AutocompleteInput /> component. I will create it inside my App.js itself and consume it inside my <App /> component

Let us create our controlled input component.

Why am I saying controlled - because I can control the text inside the input component using a state that I can change in whatever way and on whichever event I want to. 

import { useEffect, useState, useRef } from "react";

const [searchText, setSearchText] = useState("");
const AutoCompleteInput = () => {
  return (
    <div className="flex-container flex-column pos-rel">
      <input
        id="auto"
        placeholder="Type to search"
        value={search}
        onChange={event => setSearchText(event.target.value)}
      />
    </div>
  );
};

So, the final code becomes

import React, { useEffect, useState, useRef, useCallback } from "react";

const [searchText, setSearchText] = useState("");

const AutoCompleteInput = () => {
  return (
    <div className="flex-container flex-column pos-rel">
      <input
        id="auto"
        placeholder="Type to search"
        value={search}
        onChange={event => setSearchTerm(event.target.value}}
      />
    </div>
  );

function App() {
  return (
    <div className="App">
      <h1>Custom AutoComplete React</h1>
      <div className="auto-container">
        <AutoCompleteInput />
      </div>
    </div>
  );
}

export default App;
};

After this, try typing anything inside the input. You should be able to see the input text changing.