React Events in Detail
Overview
In this lab, you'll work with event data and persisting events. We will be using some event data you may not be familiar with, event.clientX
and event.clientY
. These provide the current x/y position of a mouse. Links are provided in the resources section to learn more.
Two Buttons To Rule Them All
In this lab, you'll be working on two components โ two buttons, to be more precise. These aren't just regular buttons, however! They both serve a very specific purpose.
CoordinatesButton
-
In the
components/CoordinatesButton.js
file, create aCoordinatesButton
React component. -
This component takes in one prop:
onReceiveCoordinates
. This prop is a function passed down fromindex.js
. This function is currently just logging whatever is passed into it. -
Within
CoordinatesButton
, render a button. On click of the button, create an array with two elements: the X and Y coordinates of the mouse. Find these using the event data. -
Pass this event data in as the argument for the
onReceiveCoordinates
prop. -
If successful, the current x,y position of your mouse should be logged.
DelayedButton
-
In the
components/DelayedButton.js
file, create aDelayedButton
React component -
This component takes two props:
onDelayedClick
(a function), anddelay
(a number). -
Create a button that, when clicked, will pass the click event to the
onDelayedClick
prop within asetTimeout()
. ThesetTimeout()
should be set tothis.props.delay
. -
If successful, the event will be logged to the console once the timeout has finished.