Learn TypeScript 3 by Building Web Applications

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