I am creating a side menu bar in my react application..Initially I want side menu bar to be closed and main content on the screen should be big..On clicking or on hovering on side menu bar the side menu bar should be open and main content on the screen should become small..If then the user moves mouse from the side menu bar to any different location of the screen (ie not hovering on side menu bar ) the side menu should be close and main content on the screen should become big.
I am doing this way
const ss = false;
const [s, sets] = useState(ss);
const [c,cset] = useState(!ss);
function MouseOver(event) {
sets(!ss);
}
function MouseOut(event){
sets(ss);
}
<div onMouseOver={MouseOver} onMouseOut={MouseOut} onclick={cset(!c)} className= {(s && c)? "sideMenu" : "sideMen"}>
<ConsoleSideMenu ss={sd}/>
</div>
<div className= {(s && c)? "content1" : "content"}>{main_content}</div>
"sideMenu" css property opens the side menu bar, "sideMen" css property closes the side menu bar, "content" css property makes the main content big, "content1" css property makes the main content small,
Currently it is working (if not added the onclick changes)but not able to get the desired functionality?
I am not sure I get your question right, but if you want to pass parameter (!c) to the function that fired by the event listener - onclick you should pass it this way -
onclick={()=>{cset(!c)}}
the click event calls to anonymous function which in it's turn calls cset func tion and passes the required parameter.