React Events in Detail
Overview
In this lab, you'll work with event data and persisting events.
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. (This props is only passed in the test suite, you will have errors in the browser) - 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.
DelayedButton
- In the
components/DelayedButton.js
file, create aDelayedButton
React component - This component takes two props:
onDelayedClick
(a function), anddelay
(a number). (These props are only passed in the test suite, you will have errors in the browser) - When the button is clicked, we want to persist the event so we can pass it to the
this.props.onDelayedClick()
in asetTimeout()
block. ThesetTimeout()
will be set tothis.props.delay
.