The User’s Application

In this lesson, we'll look at how our custom hook can be used in an application


Our user is a hacker who has found proof of a big conspiracy on Mars. To share this with the world, they want to use our useExpanded hook and the default UI elements we provide to build the following expandable view:

That’s the easy part.

What’s more interesting is that the hacker only wants a reader to view this secret once. It’s such a big conspiracy.

The hacker’s goal is that whenever the user clicks the button to view the secret, the expandable content is reset to the default unexpanded state. After that, the reader can click all they want on the header but the content won’t be expanded.

Do you see why the user needs the state reducer pattern?

Calling Toggle When Header is Clicked

By default, whenever the Header element is clicked, the hacker calls the toggle function.

Create a free account to view this lesson.

By signing up, you agree to Educative's Terms of Service and Privacy Policy