kashif581 / event-handling-in-react Goto Github PK

----------- Handling Events ----------------
----- Handle Button Clicked Event ---------

import React, {useState} from "react";

function App() {
  const [headingText, setHeadingText] = useState("Hello")

  function handleClick(){
    setHeadingText("Submitted")

  }



  return (
    <div className="container">
      <h1>{headingText}</h1>
      <input type="text" placeholder="What's your name?" />
      <button onClick={handleClick}>Submit</button>
    </div>
  );
}

export default App;


------------- Handle onMouseOver & onMouseOut Event ------------------

import React, {useState} from "react";

function App() {
  const [headingText, setHeadingText] = useState("Hello")

  const [isMousedOver, setMouseOver] = useState(false)

  function handleClick(){
    setHeadingText("Submitted")

  }

  function handleMouseOver() {
    setMouseOver(true)

  }
  
  function handleMouseOut() {
    setMouseOver(false)
  }




  return (
    <div className="container">
      <h1>{headingText}</h1>
      <input type="text" placeholder="What's your name?" />
      <button
      style={{backgroundColor: isMousedOver? "black" : "white"}} 
      onClick={handleClick}
      onMouseOver={handleMouseOver}
      onMouseOut={handleMouseOut}>Submit</button>
    </div>
  );
}

export default App;