反应无法内联更改按钮的背景颜色

Question

I am trying to inline toggle the background color of the submit button with react and state. I am aware that this can be achieved through a bool value isMouseOver? "black": "white" isMouseOver? "black": "white" in style. But I wonder why my first attempt does not work? Even though the variable myColor has been changed by my mouse action:

    import React, { useState } from "react";

    function App() {
      const [myColor, setColor] = useState("white");
    
    
    
      function toggleColor() {
        if (myColor === "black") {
          setColor("white");
        } else {
          setColor("black");
        }
        console.log("mycolor", myColor);
      }
    
      return (
        <div className="container">
          <h1>{myColor}</h1>
          <input type="text" placeholder="What's your name?" />
          <button
            style={{ backgroundColor: { myColor } }}
            onMouseOver={toggleColor}
            onMouseOut={toggleColor}
          >
            Submit
          </button>
        </div>
      );
    }
    
    export default App;

Answer 1

just change this line ie remove the curly braces around myColor , it should working fine

 style={{ backgroundColor: { myColor } }} 

to

 style={{ backgroundColor:  myColor  }}

Answer 2

I am trying to inline toggle the background color of the submit button with react and state. I am aware that this can be achieved through a bool value isMouseOver? "black": "white" isMouseOver? "black": "white" in style. But I wonder why my first attempt does not work? Even though the variable myColor has been changed by my mouse action:

    import React, { useState } from "react";

    function App() {
      const [myColor, setColor] = useState("white");
    
    
    
      function toggleColor() {
        if (myColor === "black") {
          setColor("white");
        } else {
          setColor("black");
        }
        console.log("mycolor", myColor);
      }
    
      return (
        <div className="container">
          <h1>{myColor}</h1>
          <input type="text" placeholder="What's your name?" />
          <button
            style={{ backgroundColor: { myColor } }}
            onMouseOver={toggleColor}
            onMouseOut={toggleColor}
          >
            Submit
          </button>
        </div>
      );
    }
    
    export default App;