Change the state of color from red to blue on button click event without using the value in button tag. In this we use the set Timeout function

Viewed 30
//State change hook in timeout function
import React from "react";
import { `useRef`, `useState` } from "react";

const Ref = () => {
  const a = useRef();
  const [color, SetColor] = useState("red");

  function handle() {
    a.current.style.color = "red";
    a.current.focus();
    a.current.value = color;
    setTimeout(() => {
      SetColor("blue");
    }, 2000);
  }

  return (
    <>
      <center>
        <h1>Use Ref</h1>
        <input type="text" ref={a} />
        <button type="button" onClick={handle}>  // Click Event
          Click Me
        </button>
      </center>
    </>
  );
};

export default Ref;
0 Answers
Related