React Tutorial: Change State with React Hooks and Mouse Events

Introduction

I came across a really cool and useful hover effect on Colors & Fonts that allows you to compare font pairings with different colors:

This interaction inspired me to tackle my own version in React and share it with the community. In this tutorial you will use the useState React Hook and Emotion to create the following:

Here's a 9-minute, step-by-step video below that you can watch if you'd prefer to follow along that way. If you enjoy it, be sure to subscribe! Otherwise, each step is outlined below the video. Let's dive in!

Get Started

Skip Building the Card Component

The main focus of this tutorial is about how to change state with React Hooks and mouse events, so to save you some time I went ahead and created a Codesandbox project that you can fork with the basic Card component completed.

Let's Talk About Emotion(s)

In this tutorial we'll be using Emotion, a CSS in JS framework. If you've never heard of a CSS in JS framework, there's a couple of key benefits, including:

• Add, change and delete CSS without any unexpected consequences and avoid dead code.
• Never go on a hunt for CSS affecting your components ever again.
• Avoid common CSS frustrations to keep a neat codebase and moving quickly, regardless of experience levels.
• Send only the critical CSS to the user for a rapid first paint.
• Simply style your components with a global theme or based on different states.

The last benefit in the above list is what we're going to focus on today because we're going to use the state from our useState React Hooks to dynamically change the colors of the fonts and background.

So that's the intro, let's get to coding!

Create State Using the useState React Hook

We first need to import useState from React at the top of the Card component. After it's imported we'll use array destructuring to create the state variable and the function to update the state. You can name these two values anything you want, but a good practice is to give your state variable a descriptive name like background and follow the function naming convention with set + variable name–so setBackground in this case.

Next we declare useState(), passing a default value in parenthesis. The default value for background will be a hex code for the background color, which is an off-white value of #fdfdfd.

We also need to create a state value and function for the font color, so create another instance of useState with a state variable of font and a function of setFont. The default value for this state variable is the following hex code: #424246.

Now with state values initiated in our component we can pass them into the CSS, replacing the hex code values with the default state values. We're not covering much of Emotion in this tutorial, but do take note that I'm storing the CSS in constants and passing the constants into the className below. You could pass the CSS directly into the className, but breaking them into constants makes it a little easier to grok.

By now the Card component should look like this:

Note in the above code that I used div tags for the 3 buttons instead of button tags like I did in the video.

Create a Method to Handle the State Functions

Right below where we declared the state values and functions, create a new arrow function called setStyle that takes two parameters: background and font. These parameters will be hex code string values that we will pass into our state functions as arguments in order to update the state.

In order to update the state we need to call the two state functions, passing the background parameter into the setBackground function and the font parameter into the setFont function.

Your new setStyle method should look like this:

Add onMouseEnter and onMouseOut Events to the Buttons

Let's bring this all together by writing onMouseEnter and onMouseOut events in each button, passing in the hex code values we want to set. Also note that it's important to write these as arrow functions or the code will execute when the component in rendered.

And that's it! Now your Card component should look like this:

Continue Learning

If you made it this far, thank you! You can keep up with all my content by subscribing to the Skillthrive Youtube channel. I have a number of courses on there that you can start watching for free, including a 3.5 hour course on how to build a blog from scratch using React, Gatsby, and Contentful.