Changing React.js Box Component Color with a Click While Keeping Track of State with Hook Private

Continuing the example of colored Box components in React.js, the lesson explains how to listen to and handle click events. More specifically the goal is to click a button to change the color of an existing box.

You are introduced to the concept of state using the useState hook to keep track of a color name. See how you assign the return value of the useState hook to two variables created via destructuring of an array. One variable to access the state value and another to mutate (modify) that state value.

When the React state changes, the component renders anew. That is, the function that defines the component is called again and if any values have changed from a previous render, they will be reflected in the updated document object model (DOM) for the web application.