onMouseOver function firing before mouseOver

Question

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 fuction 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, if somone seems my error or knows an alternative I would be very grateful. Thank you in advance.

Answer 1

Change

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

to

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

Otherwise you are calling the function each time it renders.