React Events in Detail
Overview
In this lab, we will practice using event data and persisting events. We will be
working with 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.
Instructions
In src/index.js
, code for a basic React app is already provided. Two of the
components referenced, CoordinatesButton
and DelayedButton
, are being passed
props. However, these components are not written yet, causing the application
(and learn
) to crash. Using the provided component files, follow the
instructions below to create these components. Run learn
to track your
progress through the lab.
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.