A React Hooks Challenge for Senior React Developers

Can you solve this problem?

A while ago, a friend sent me a React demo to test my understanding of React.

I took a closer look at this demo. Although the code is very small, it contains the following:

• Closure problem with hooks
• The principle of state

This is indeed an interesting challenge. Here I want to share this challenge with you. After reading this article, you will have a deeper understanding of functional components.

The Demo

The demo’s structure is simple: it contains a button and a list.

And when the button is clicked, it adds something to the list, as you can see below:

It looks like this:

Until now, it is pretty simple, isn’t it?

The funny and complex part is that when you click the Add button, it will add a new button that also has a onClick={add} event to the list.

So, if you click Add seven times, the page will look like this: