In this lab, you'll work with event data and persisting events.
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.
- In the
components/CoordinatesButton.js
file, create aCoordinatesButton
React component. - This component takes in one prop:
onReceiveCoordinates
. This prop is a function. - When the button is clicked, create an array with two elements: the X and Y coordinates of the mouse. Find these using the event data.
- The
onReceiveCoordinates
callback prop is then called with these coordinates.
- In the
components/DelayedButton.js
file, create aDelayedButton
React component - This component takes two props:
onDelayedClick
(a function), anddelay
(a number). - When the button is clicked, we create an array with two elements: the X and Y coordinates of the button that you retrieve using the event data.
- The
onReceiveCoordinates
callback prop is then called with these coordinates.