Debugging a Problem with an OnClick Event in React.js

Here is a problem that I had today, and how I solved it.

Merrin Macleod
2 min readAug 28, 2020

A handleClick event wasn’t behaving like I expected it to behave. I replaced everything inside it with a console.log to make it easier to tell what was going on.

When the component loaded, the event fired many times.

💩💩💩💩💩💩💩💩💩

This indicated to me that the function was being run many times when the component was loaded.

If the function was not running at all, I would have put thiss on things until it worked. Because it was running too many times, I removed () s until it worked.

Now it only poop s when I click on the div. Success.

💩🎉

What are your best tips and tricks for debugging React?

--

--