useState(), Handling Mouse Events, & Conditional Rendering.

useState()

The useState function helps us manage our state in our react virtual dom. Take for an example that we have an h1 element.

<h1>Hello World</h1>

We can modify the h1 by declaring a useState function like so.

const [headingText, setheadingText] = useState("Hello World");

The state is only created the first time our h1 renders. During the next renders, useState gives us the current state.
The state variable AKA "headingText" will be assigned to the h1 content like so

<h1>{headingText}</h1> 
console.log(headingText); // "Hello World" 

Calling our setheadingText function with a new string will update our state and h1 like so.

setheadingText("Hello React"); 
console.log(setheadingText); // "Hello React"

Mouse events: onclick,onmouseover, and onmouseout.

These events triggers an action when the mouse interacts with the HTML document. This allows us to keep track of when a user performs an action on a website and respond dynamically based on the type of event.

<div className="container">
      <h1>Hello</h1>
      <input type="text" placeholder="What's your name?" />
      <button onClick={handleClick}
        onMouseOver={handleMouseOver}
        onMouseOut={handleMouseOut}>Submit</button>
    </div>

The handleClick function is fired when the user clicks on the button element and prints "Clicked" to the console.

function handleClick() {
    console.log("Clicked"); // "Clicked"
  }

The handleMouseOver function is fired when the when the pointer is moved onto button element and prints "Mouse over" to the console.

function handleMouseOver() {
    console.log("Mouse over"); // "Mouse over"
  }

The handleMouseOut function is fired when a user moves the mouse pointer out of button element and prints "Mouse out" to the console.

function handleMouseOut() {
    console.log("Mouse out"); // "Mouse out"
  }

Conditional rendering

For this example we will be using useState() to keep track of our current state of the button element.

<button>Submit </button>

Then apply styling to our button on mouse over and mouse out. This technique is called conditional rendering and uses JavaScript conditional operator to render the different styles.
It takes three operands: a condition followed by a question mark (?), then an expression to execute if the condition is truthy followed by a colon (:), and finally the expression to execute if the condition is falsy

condition ? true : false.

Let's go ahead and create our two functions to handle onmouseover and onmouseout events. Then call them on the button like so.

function handleMouseOver() {
    setMouseOver(true);
  }
  function handleMouseOut() {
    setMouseOver(false);
  }
 <button

        onClick={handleClick}
        onMouseOver={handleMouseOver}
        onMouseOut={handleMouseOut}
      >
        Submit
      </button>

Finally we'll use our conditional (ternary) operator to check if onmouseover and apply a background color of black, else a background color of white if onmouseout like so.

<button
        style={{ backgroundColor: isMouseOver ? "black" : "white" }}
        onClick={handleClick}
        onMouseOver={handleMouseOver}
        onMouseOut={handleMouseOut}
      >
        Submit
      </button>
//The background color will change when each of the conditions is met.

And this guys, marks the end. Thank you for checking this out. :) This was quite a challenge for me to grasp. Still working on it and hoping to improve on how I explain and present the flow of code with better code examples. ;)