Hey guys. In this lesson I want to talk a bit more about handling events in React. How you can detect
when the user interacts with your app or your components and how you can use React to render different
things depending on those events.
And this is the functionality that you will have built by the end of the lesson. As we mouse over the
button it turns to black
and when we mouse away from it it turns to white. And in order to be able to implement this functionality
we'll bring together many other concepts that we've covered in the past lessons including conditional
rendering, inline styling, mouse events and managing state.
So go ahead and fork the starting sandbox and then we can get started.
I've got a very simple form that I've created here which you'll notice is partly borrowed from our previous
log in and registration screen.
All it has is an that currently just says hello.
It has an inputs of type text and a placeholder that is asking for a name to be typed in.
Finally it's also got a submit button.
So just three components, very simple.
Now we've already seen previously that you can tap into very simple events such as when a button gets
clicked via the attributes for those HMTL elements.
So the attribute that we've already been using is the onClick.
And remember again when we're converting HMTL elements into JSX or React Components the names
of the attributes gets turned into camel case.
So when the button gets clicked then we want to trigger some code. So we might have a function in our
app which is called handleClick.
And when this function gets fired all we're going to do for now is just to print clicked. And then I'm
just going to pass the name of this function as the action that should be initiated when this button
gets clicked.
Now whenever I click on the submit button, you'll notice in the console we get the word clicked logged.
And this happens every single time I press on this button.
This is a clue that we can actually tap into this function and trigger any sort of code we want that
is tied to this button being clicked.
Now what kind of things might we want to do?
Well maybe we want to change the text that's in our .
So for example instead of just having the word hello in here, maybe I'll have a variable called heading
Text. And this headingText is of course something that's going to have state because it's going to change
when the button gets clicked.
So I'm going to create my new stateful headingText and also a method for setting the headingText.
So I've got headingText and setHeadingText
and this is the common way that people tend to name these state variables and also the function for
setting the state when they're using hooks.
And then I'm going to set it to use state. And as soon as I hit enter my use state gets imported from
React automatically because I'm using code sandbox.
But if you're not using code sandbox, just be sure to remember to add that import.
This useState is of course a function and inside the parentheses
I get to give it a starting value. So let's set it to the string
Hello.
Now to start with my just says hello.
And then what I want to happen is when this button gets clicked, I want to be at to change this word
to submited.
Well I can do that using my setHeadingText function that I created and I'm going to change the heading
text to submited.
So now whenever I click on this button, my gets updated to a new value which is the word submitted.
But what other events are there?
What else can we respond to other than a button being clicked?If you take a look at the documentation
on w3schools.com on HTML event attributes, you can see that there's loads of them that you can choose
from. And one that may be quite useful for us is something called on a mouse out and on mouse over.
This allows us to detect when the mouse is hovering over or has hovered out of a particular element.
All right.
So at this point I want to pose a more difficult challenge to you. See if you can add the on mouse over
and on mouse out attributes to our button here so that the end result is to be able to have your mouse
hover over the submit button and for it to change its background color from white to black.
But then as soon as your mouse leaves the button, the background color of the button changes back to
white. And you're going to be using these two attributes. If you already know how to tackle this challenge,
pause the video now.
If not I'll give you another hint
after a few seconds.
All right.
Here's my first hint.
Remember that you can change the appearance of an HTML element by using the style attribute.
So you can set it to, for example, a new object where the key is the style that you want to change,
so in this case it's background color.
But remember because this is Javascript, we have to use the camel cased version of it and then we set
that equal to a string.
So I'm going to set that equal to black.
And now you'll see that my button changes to the black color. But of course this is not the goal.
The goal is for it to change it to black
only when my mouse is hovering inside and then change it back to white where my mouse is not hovering
inside.
So you'll have to use the on mouse out and on mouse over events
and also the style attribute to change the background color to black or to white.
But in addition, you'll have to think about how you're going to manage state and also how to conditionally
render a different background color.
So there's a lot of things in there but I'm sure you can do it.
Pause the video and try to give it a go.
And once you're done, come back and we'll walk through it together.
All right.
So here's the solution to the challenge.
So the first thing to do is to apply the onmouseover event to our button.
So that's going to go in just as onClick was added,
so it's going to be a attribute.
And remember because we are in JSX, these names are all camel cased. So onmouseover and we're going
to make it trigger a function. And that function
I'm going to create just below my handle click and you can call in anything but I'm going to call it
handleMouseOver. And that is what will trigger when the user hovers their mouse over this button. And
to check and make sure that actually works,
let's go ahead and log moused over.
And now as soon as you see my cursor move into the boundary of the button, then we get the log 'Moused
over'. And this happens every single time my mouse goes from out to in.
All right.
So we've now confirmed that our mouse over event is being handled correctly and we're able to trigger this
function when that happens.
The next thing we want to do is to create some sort of variable that can hold state namely the state
of whether if we should change the background color.
So I'm going to create a new constant and I'm going to call that state isMousedOver.
And I'm also going to add a function to be able to set it. So setMouseOver. And then I'm gonna make it
equal to useState and the starting value is going to be false.
So normally when the website loads up your mouse is not gonna be inside the button right?
But when our mouse over is triggered calling this method handleMouseOver, then and only then are we going
to set our mouse over.
So call the method that we created here and then we're going to set it to true.
Now we're able to use this isMousedOver to see what colour we should render the background of the button.
So that means if the isMousedOver property is equal to true, then we're going to set the background
color to black but if it's not true i.e. else then we're going to set it to white.
So now if you go ahead and refresh this, you'll see that it starts out being white
but as soon as my mouse goes in and hovers over the button, it changes the black.
But unfortunately we have no way of changing it back at the moment because we haven't yet implemented
the on mouse out event.
So let's go ahead and do that.
And remember if you got stuck previously and you couldn't get the on mouse over to work, now that you've
seen how it's done
go ahead and see if you can go back and add the on mouse out event. The on mouse out event is added the
same way as on mouse over.
So we'll just have to make sure we spell it right, onMouseOut, and we're going to get it to trigger another
function.
And this one I'm going to call handleMouseOut and inside this function, I'm going to set isMousedOver
property back to false.
So I'm going to call setMouseOver and set it to false. And then I'm going to make sure I call this
function when onMouseOut is triggered.
So now when I hover of the button, it turns black. When my mouse leaves it it turns white again. And we're
able to do this because of all the knowledge that we've built up including conditional rendering using
the ternary operator here, setting inline styles in our component, using event listeners such as on mouse
over on mouse out, as well as setting and using state. Now in the next lesson, we're going to be looking
more at how to use forms in React. And how to be able to receive and handle the events that arise from
these inputs in a form.
So for all of that and more, I'll see you there.