React useState hook isn't updating state as desired

Question

I'm trying to change the background color of a button to black as mouse hover over it and change it back to white when it's not. I used the state on a string which will change to black or white and pass it in style property. Any idea on where I'm going wrong?

Thank you.

import React, { useState } from "react";

function App() {
  const [headingText, setHeadingText] = useState("Hello");
  const [buttonColor, setButtonColor] = useState("White");    //setting the state

  function handleClick() {
    setHeadingText("Submitted");
  }

  function mouseOver() {
    setButtonColor("Black");             //changing state
  }
  function mouseOut() {
    setButtonColor("White");             //changing state
  }

  return (
    <div className="container">
      <h1>{headingText}</h1>
      <input type="text" placeholder="What's your name?" />
      <button
        style={{ backgroundColor: { buttonColor } }}    //where I want it to apply
        onClick={handleClick}
        onMouseOver={mouseOver}
        onMouseOut={mouseOut}
      >
        Submit
      </button>
    </div>
  );
}

Answer 1

You should use instead onMouseEnter and onMouseLeave events.

Try as the following:

<button style={{ backgroundColor: buttonColor }}
        onClick={handleClick}
        onMouseEnter={mouseOver}
        onMouseLeave={mouseOut} >

Read further here in React documentation for Mouse Events .

I hope this helps!

Answer 2

1. You should use "debounce" to delay the process of mouseOver event. You can reference the link: https://levelup.gitconnected.com/debounce-in-javascript-improve-your-applications-performance-5b01855e086
2. Lodash library supports the debounce function. It is easy to use: https://lodash.com/docs/4.17.15#debounce

import React, { useState } from "react";

import { debounce } from 'lodash';

function App() {
  const [headingText, setHeadingText] = useState("Hello");
  const [buttonColor, setButtonColor] = useState("White");    //setting the state

  function handleClick() {
    setHeadingText("Submitted");
  }

  function mouseOver() {
    setButtonColor("Black");             //changing state
  }
  function mouseOut() {
    setButtonColor("White");             //changing state
  }

  return (
    <div className="container">
      <h1>{headingText}</h1>
      <input type="text" placeholder="What's your name?" />
      <button
        style={{ backgroundColor: { buttonColor } }}    //where I want it to apply
        onClick={handleClick}
        onMouseOver={debounce(mouseOver, 200)}
        onMouseOut={debounce(mouseOut, 200)}
      >
        Submit
      </button>
    </div>
  );
}