useState examples
In this section, we are going to look at two examples of how the useState hook is applied in practice.
Making an avatar component
Let's say you want to display an image of a person that you have pulled from the internet. Most of the time, it will turn out to be a good picture (see Figure 4.7). But sometimes, an image can be unavailable to download due to network or permission issues. When this happens, the browser throws a broken icon (the logo in the middle of Figure 4.7), which is not as nice to look at. The latest UX research shows that if we replace any broken image icons with something more unique (such as a user's name or initials, as shown on the right of Figure 4.7), this improves the user experience.
Figure 4.7 – An avatar component using useState
In order to switch between an image and text, we can apply useState to define a condition. We will also need an event handler to notify us when an image URL is broken...