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.clientY. These provide the current x/y position of a mouse. Links are
provided in the resources section to learn more.
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.
src/index.js, code for a basic React app is already provided. Two of the
DelayedButton, are being passed
props. However, these components are not written yet, causing the application
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.
components/CoordinatesButton.js file, create a
This component takes in one prop:
onReceiveCoordinates. This prop is a
function passed down from
index.js. This function is currently just logging
whatever is passed into it.
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
If successful, the current x,y position of your mouse should be logged.
components/DelayedButton.js file, create a
This component takes two props:
onDelayedClick (a function), and
Create a button that, when clicked, will pass the click event to the
onDelayedClick prop within a
should be set to
If successful, the event will be logged to the console once the timeout has finished.
Hint: If you having trouble with this feature, remember event pooling in React. By the time the setTimeout fires, the event object will have already been returned to the pool. So how can we fix that?