I’ve just started learinng react and i dont get that why setHeadingText changes the color onMouseOver event but setColor doesn’t
import React from "react";
function App() {
const [headingText, setHeadingText] = React.useState("Hello");
const [color, setColor] = React.useState("white");
function mouseOver() {
setColor("black");
setHeadingText("Yo");
}
function mouseOut() {
setColor("white");
setHeadingText("Bye");
}
return (
<div className="container">
<h1>{headingText}</h1>
<input type="text" placeholder="What's your name?" />
<button
style={{ backgroundColor: { color } }}
onMouseOver={mouseOver}
onMouseOut={mouseOut}
>
Submit
</button>
</div>
);
}
It works if i use conditional like
const [mouseOver, setMouseOver]=useState(false);
function MouseOver(){
setMouseOver(true);
}
and then
style={{backgroundColor: MouseOver ? "black":"white"}}
but why it doesnt work like that what am i doing wrong??