Learn TypeScript 3 by Building Web Applications

Clearing the input

With our two-way binding in place, we can now easily clear the input by adding the following constant to the component, under the previous one:

const clearHandler = () => { 
    updateSearchText(''); 
}; 

Then, modify the first button of InputGroup, as follows:

<Button variant='secondary' aria-label='Clear the search text' onClick={clearHandler}>X</Button> 

Clicking on this button will now call the clearHandler function, which will reset the searchText state variable. In turn, the value change will modify FormControl.