Learn TypeScript 3 by Building Web Applications

Adding state and binding our input to it

Now that we have the base structure of our component, we can add its state. Internally, our Search component will only keep one data point: the current search input text.

First of all, add the following line at the beginning of the component function, just before the useEffect function call:

const [searchText, updateSearchText] = useState(''); 

Then adapt the following import:

import React, { useEffect, useState } from 'react';

As we saw earlier in this chapter, useState allows us to define both a state variable and a function to modify it. If you remember what we've explained before, the empty string passed to useState is the initial value.

Our component now has a piece of state called searchText ...