The fix works because the first code sample (the erroring one) invokes a function inside onClick
, while the second (the working one) passes a function to onClick
. The difference is those all-important parentheses, which in JavaScript mean ‘invoke this code’.
Think of it this way: in the first code sample, every time component
is rendered, renderResults
is invoked. Every time that happens, setAllResultsVisible(!allResultsVisible)
, rather than waiting for a click, is called. Since React performs the render on its own schedule, there’s no telling how many times that will happen.
From the React docs:
With JSX you pass a function as the event handler, rather than a string.
Note: I wasn’t able to get this exact error message when running the first code sample in a sandbox. My error referred to an infinite loop. Maybe a more recent version of React produces the error described?