DEV Community

Collins Mutai
Collins Mutai

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

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

const [headingText, setheadingText] = useState("Hello World");
Enter fullscreen mode Exit fullscreen mode

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" 
Enter fullscreen mode Exit fullscreen mode

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

setheadingText("Hello React"); 
console.log(setheadingText); // "Hello React"
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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"
  }
Enter fullscreen mode Exit fullscreen mode

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"
  }
Enter fullscreen mode Exit fullscreen mode

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"
  }
Enter fullscreen mode Exit fullscreen mode

Conditional rendering

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

<button>Submit </button>
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

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. ;)

Top comments (0)