I have a sidebar menu in react, when buttons are clicked in this sidebar I want to update state of a variable. However the event fires off on render instead of waiting for a click, help much appreciated!
Side Bar
return (
<>
<div id="container1">
<ProSidebar id='tester1'>
<SidebarHeader>
<h1>Header Title</h1>
</SidebarHeader>
<SidebarContent>
<Menu iconShape="square">
<MenuItem onClick={funx(1)} icon={<FiHome className='sideBarIcon'/>}></MenuItem>
<MenuItem icon={<FaList className='sideBarIcon'/>}></MenuItem>
<MenuItem icon={<FaRegHeart className='sideBarIcon'/>}></MenuItem>
<MenuItem icon={<RiPencilLine className='sideBarIcon'/>}></MenuItem>
<MenuItem icon={<BiCog className='sideBarIcon'/>}></MenuItem>
</Menu>
</SidebarContent>
<SidebarFooter>
<Menu iconShape="square">
<MenuItem icon={<FiLogOut />}>{x}</MenuItem>
</Menu>
</SidebarFooter>
</ProSidebar>
</div>
</>
);
And where the state gets set:
const [x, setX] = useState([]);
const funx = (e) => {
console.log(e);
setX(e);
}
I'd like to add if I remove the e parameter from funx, and only call funx in my menu, the onclick event seems to be working fine. However I want to pass 1/2/3/etc. depending on what's clicked
onClick={funx(1)} the code inside the brackets is evaluated at render, so you're actually calling the function. You want to pass a function reference. If you need to pass the 1 you could do:
<MenuItem onClick={() => funx(1)} ...>
Instead of setting the onClick event handler function like <MenuItem onClick={funx(1)} icon={<FiHome className='sideBarIcon'/>}></MenuItem>
You have to change the as like code given below:
<MenuItem onClick={() => funx(1)} icon={<FiHome className='sideBarIcon'/>}></MenuItem>
Or you can modify the event handler function as shown below:
const funx = (value) = (event) => {
console.log(value);
setX(value);
}
Now you can call the function as below:
<MenuItem onClick={funx(1)} icon={<FiHome className='sideBarIcon'/>}></MenuItem>