Im using react and tailwind. I trying to display a state based on clicking a nav button or hovering on the same button. So i am trying to have a display with the potential to show 1 of 3 elements. You can select the elements from the nav bar. I want to have it so that if you hover over the nav link, you get the element display, but if you move the mouse away it goes back to the selected element. It should display overview initially and then i can click on the links to swap element, or hover to get a display of the element.
The issue is when i add an onclick listener to my links. I get an infinite rerendering error.
Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
How can i have a hover and click function
const [displayOverview, setDisplayOverview] = useState(false);
const [displayProjects, setDisplayProjects] = useState(false);
const [displayDesigns, setDisplayDesigns] = useState(false);
const [selectedNavElement, setSelectedNavElement] = useState('overview');
const [displayFixed, setDisplayFixed] = useState(true)
<ul className='flex lg:text-left gap-24'>
<li
onMouseEnter={() => {setDisplayOverview(true); setDisplayFixed(false)}}
onMouseLeave={() => {setDisplayOverview(false); setDisplayFixed(true)}}
>
Overview
</li>
<li
onMouseEnter={() => {setDisplayDesigns(true); setDisplayFixed(false)}}
onMouseLeave={() => {setDisplayDesigns(false); setDisplayFixed(true)}}
>
Designs
</li>
<li
onMouseEnter={() => {setDisplayProjects(true); setDisplayFixed(false)}}
onMouseLeave={() => {setDisplayProjects(false); setDisplayFixed(true)}}
>
<span onClick={setSelectedNavElement('projects')}>Projects</span>
</li>
</ul>
</nav>
{/* Content */}
<section className='bg-red-500'>
{displayOverview && <Overview />}
{displayDesigns && <Designs />}
{displayProjects && <Projects />}
{(selectedNavElement === 'overview' && displayFixed === true) && <Overview />}
{(selectedNavElement === 'designs' && displayFixed === true) && <Designs />}
{(selectedNavElement === 'projects' && displayFixed === true) && <Projects />}
</section>
