React Tutorial: Change State with React Hooks and Mouse Events
Tags: react, tutorial
Published: 2019-11-06 13:35:29

## Introduction

I came across a really cool and useful hover effect on [Colors & Fonts](https://colorsandfonts.com/fonts.html) that allows you to compare font pairings with different colors:

![Font Pairing Contrast Comparison from Colors and Fonts](https://thepracticaldev.s3.amazonaws.com/i/rvvwgcygwghmetg8sfio.gif)

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:

{% codesandbox gvqfn %}

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](https://www.youtube.com/channel/UCvHKiUI75ytqUcN851fRR2w?sub_confirmation=1)! Otherwise, each step is outlined below the video. Let's dive in!

{% youtube SzYnG9mVDF4 %}

## 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](https://codesandbox.io/s/change-state-onmouseenter-onmouseout-before-hvweh) with the basic Card component completed.

### Let's Talk About Emotion(s)

In this tutorial we'll be using [Emotion](https://emotion.sh/docs/introduction), a CSS in JS framework. If you've never heard of a CSS in JS framework, there's a couple of [key benefits](https://mxstbr.com/thoughts/css-in-js/), 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:

{% gist https://gist.github.com/hunterbecton/c2279aca0c50bb926f1a5099d2bf3499 %}

**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:

{% gist https://gist.github.com/hunterbecton/3cb8151e522055951c57dab0fe6eaa87 %}

## 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:

{% gist https://gist.github.com/hunterbecton/652a4449820af4ffbc5f4ea61414a9c4 %}

## 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](https://www.youtube.com/channel/UCvHKiUI75ytqUcN851fRR2w?sub_confirmation=1). 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](https://youtu.be/4Wh5mTyn5WI) using React, Gatsby, and Contentful.