50
rated 0 times
[
51]
[
1]
/ answers: 1 / hits: 194847
/ 5 Years ago, wed, april 10, 2019, 12:00:00
I have a component that looks like this (very simplified version):
const component = (props: PropTypes) => {
const [allResultsVisible, setAllResultsVisible] = useState(false);
const renderResults = () => {
return (
<section>
<p onClick={ setAllResultsVisible(!allResultsVisible) }>
More results v
</p>
{
allResultsVisible &&
<section className=entity-block--hidden-results>
...
</section>
}
</section>
);
};
return <div>{ renderResults() }</div>;
}
When I load the page this component is used on, I get this error: Uncaught Invariant Violation: Rendered more hooks than during the previous render. I tried to find an explanation of this error, but my searching returned no results.
When I modify the component slightly:
const component = (props: PropTypes) => {
const [allResultsVisible, setAllResultsVisible] = useState(false);
const handleToggle = () => {
setAllResultsVisible(!allResultsVisible);
}
const renderResults = () => {
return (
<section>
<p onClick={ handleToggle }>
More results v
</p>
{
allResultsVisible &&
<section className=entity-block--hidden-results>
...
</section>
}
</section>
);
};
return <div>{ renderResults() }</div>;
}
I no longer get that error. Is it because I included the setState function within the jsx that is returned by renderResults? It would be great to have an explanation of why the fix works.
More From » reactjs
