The InputCity Component

The InputCity.js component provides us with a search box. In it, we write the name of the city and add a “search” button to initiate an API call. Let’s begin by creating a search bar. Our InputCity component accepts the onSubmitHandler, city, and onInputHandler properties, which are passed once the InputCity component is imported into the App.js file. This can be observed in the following code:

const InputCity = ({ onSubmitHandler, city, onInputHandler }) => {
  return (
     ...
  )
}

Add the input element

It’s a usual HTML element, taking city and the onInputHandler function as attributes, in this case. The first retains the value of the city name provided by the user for the value attribute. The second alters the city name for the onChange attribute. The snippet below demonstrates how to add the input element:

const InputCity = ({ onSubmitHandler, city, onInputHandler }) => {
  return (
    <div className="input">
      <input
        type="text"
        value={city}
        onChange={onInputHandler}
        placeholder="City..."
      />
      <br />
  );
};

Add the submit button

We’ll now add the submit button that takes the onSubmitHandler as the value for the onClick attribute. This onClickHandler function is responsible for setting the value of the city that eventually calls our API. Here’s how we can create the submit button:

<button className="input_btn" type="submit" onClick={onSubmitHandler}>
     Search
</button>