javascriptreactjsonmouseover

onMouseOver function firing before mouseOver

I am trying to have a div that changes the value of BarText when it is hovered over. In my app.js I have the value set like so.

const [BarText, setBar] = useState("test")

And the values and the function are passed as props to the component where this code is:

<NavLink
 to="/sol"
className="systemButton"
onClick={() => {
 setIn(true);}}
onMouseOver={props.setBar('stuff')}
>

At the moment, the function is working as it does change the value of the BarText from "test" to "stuff", however it does not do it on hover, it seems to do it on render. When I refresh the page the BarText already reads as "Stuff" indicating that the function has already fired.

When I applied several onMouseOver events to different divs, the BarText will change to the last one in the component.

It appears that I am not using the onMouseOver properly. What error am I making?

Solution

  • Change

    onMouseOver={props.setBar('stuff')}

    to

    onMouseOver={() => props.setBar('stuff')}

    Otherwise you are calling the function each time it renders.