Adding the search handler

When the user presses Enter or clicks on the Search button, we want to initiate the search.

To achieve this, the first thing that we need to do it to create a handler function within the component:

const searchHandler: VoidFunction = () => {
  console.log('Search: search handler called. Search text: ', 
  searchText); 
  if (searchText === '') {
    clearHandler();
  }
} 

For now, we only log to the console, but we will revisit this very soon.

Now, attach that function to the onClick event of the search Button:

onClick={searchHandler} 

With that done, you should be able to validate that the message is displayed in the console when you click on the button.

Next up, attach the same function to the onKeyUp event of FormControl, which should now look as follows:

<FormControl id='searchText' type='text' 
   placeholder='Artist or song to search for' 
   aria-label='Artist or song to search for' 
   value={searchText} 
   onChange={handleSearchTextInputChange} 
   onKeyUp={(e: React.KeyboardEvent) => e.key === 'Enter' ? 
  searchHandler() : null} 
/> 

Here, we have simply checked the key property of the React KeyboardEvent event to determine whether the Enter key was pressed. Notice there is a bit less magic involved here compared to Angular and Vue.js.