Objective

Use state and some events to change the background of a <div> as the mouse hovers on it.

Difficulty

Very easy

Description

We are all familiar with the CSS :hover pseudo-class, aren't we? It simply defines some styles to execute when the mouse pointer hovers over an element.

For instance, let's suppose we have the following <div> along with the following CSS:

<div>Change the background</div>
div {
   background-color: #eee;
}

div:hover {
   background-color: yellow
}

Thanks to div:hover, the moment we hover over the <div>, its background changes to yellow, and then when the mouse leaves, the background changes back to #eee.

Now as you may know, :hover could be emulated using JavaScript as well, in particular, using mouse events. Remember the two events used to emulate :hover? Well, they are mouseenter and mouseleave.

But this exercise isn't about :hover or about JavaScript; it's all about React and getting better at its foundational concepts. Right?

So in this exercise, you have to create a <div> that changes its background to yellow everytime the mouse hovers over, and then resets it back as soon as the mouse leaves, without using :hover.

Here are two points to consider when styling the <div>:

  • It should have a height of 200px.
  • Its initial background color should be #eee.
View Solution

New file

Inside the directory you created for this course on React, create a new folder called Exercise-2-Change-The-Background and put the .js solution files for this exercise within it.

Solution

Let's start by thinking about what we need to solve this exercise. Well, firstly we notice of rerenders to be done on each hover gesture, i.e. to change the <div>'s background color. This hints us to use state. And for that we also need a component.

So let's go on and get done with laying out a component along with returning the desired <div> from it and even initializing some state data inside it.

We'll give the component a generic name — App, as it just represents the app being created:

function App() {
   const [backgroundColor, setBackgroundColor] = useState('#eee');

   return (
      <div style={{height: 200, backgroundColor: backgroundColor}}>
         Change the background
      </div>
   );
}

The backgroundColor state constant here would be used to specify the value of the inline CSS style property backgroundColor of the <div> element.

Now, it's only a matter of configuring some event handlers on the <div> which can appropriately update the backgroundColor state, depending on the event occurred.

The question is: which event handlers? Can you figure them out?

Well, we need onMouseEnter and onMouseLeave.

Upon the mouseenter event, we'll update the backgroundColor state to 'yellow', and then upon mouseleave, we'll reset it back to '#eee'.

Let's implement both these handlers now:

function App() {
   const [backgroundColor, setBackgroundColor] = useState('#eee');

   return (
      <div style={{height: 200, backgroundColor: backgroundColor}}>
      onMouseEnter={() => setBackgroundColor('yellow')}
      onMouseLeave={() => setBackgroundColor('#eee')}
         Change the background
      </div>
   );
}

And guess what? We are done.

Live Example