Learn TypeScript 3 by Building Web Applications

Adding props to communicate with the outside world

Our component is now almost complete. The last thing that we need to do is to let the outside world know whenever a search action is requested and whenever the search text gets cleared.

To do this, we will add two entries to our props, so that users of this component can pass in functions for us to call when the respective events occur.

Go ahead and modify the Props interface as follows:

type Props = { 
    searchTriggered: (searchText: string) => void; 
    searchCleared: VoidFunction; 
}; 

We have defined two functions that we expect to receive through props:

• The first one is called searchTriggered, which we will call whenever a search has been requested. We will pass the current searchText value ...