learn-co-curriculum / react-events-in-detail-lab

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

1. In the components/CoordinatesButton.js file, create a CoordinatesButton React component.

2. 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.

3. 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.

4. Pass this event data in as the argument for the onReceiveCoordinates prop.

5. If successful, the current x,y position of your mouse should be logged.

DelayedButton

1. In the components/DelayedButton.js file, create a DelayedButton React component

2. This component takes two props: onDelayedClick (a function), and delay (a number).

3. Create a button that, when clicked, will pass the click event to the onDelayedClick prop within a setTimeout(). The setTimeout() should be set to this.props.delay.

4. If successful, the event will be logged to the console once the timeout has finished.

5. 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?

Resources

• React Mouse Events
• ClientX Mouse Event
• ClientY Mouse Event

react-events-in-detail-lab's Issues

What is the purpose of this lab?

Honestly, I don't feel I'm learning how to use React! And it's very frustrating.

I completed the lab, but have no understanding of what the component is supposed to do! Especially when I can't test the app in the browser.

I feel I'm executing isolated tasked without properly understanding how they work in the big picture.

I've decided to take a React course on Udemy and then come back to complete these lessons and labs. Hopefully then I'll learn how to use React properly...

I apologize for all the complains but after knowing and experiencing how you guys can deliver amazing curriculum (as was the case with Ruby, Rails, even the JavaScript track) this track is really disappointing...

Poor instructions

The delayedButton instruction are not clear, and with limited test output, are very difficult to translate into the desired outcome. There is also no solution present.

Passing Written Tests, Browser Errors

Hello! I wanted to bring awareness to this lab. I was able to pass the tests that were written for the lab but I had errors in the browser when I actually used the the buttons(to click them) and see their action.

I also noticed that the two functions onReceiveCoordinates and onDelayedClick are part of the tests but nowhere in my code did I define these functions. I assume this may be why I am receiving browser errors overall.

Since passing the tests I decided to move on because I couldn't linger any longer on a lab. I did want to make sure this was looked at though. I provided the browser errors I received for both functions and my passing tests in the console.

Happy coding
Malind

wording confusing

the wording for coordinates button #2 is very confusing. The words "takes in" makes it sound like it should be entered as an argument to a method.

readme is unclear on functions defined in test suite

This is very unclear in the readme (as are many other things), but onReceiveCoordinates and onDelayedClick are functions that are defined in the test suite and passed in as props when the tests are run. Students do not need to define these as props in their component files, and this should be made clear in the readme, especially given how uninformative the error messages in the tests are.

Tests only pass with arrow function not an anonymous function for setTimeout()

@Lukeghenco

  handleClick(event) {
    event.persist();
    setTimeout(() => {
      this.props.onDelayedClick(event);
    }, this.props.delay);
  }

but in docs for setTimeout this is how this lab would be solved but it's failing.

  handleClick(event) {
    event.persist();
    setTimeout(function() {
      this.props.onDelayedClick(event);
    }, this.props.delay);
  }

all tests passing, but still showing tests failed

passed all tests (running both learn & npm test) - submitted, but still showing tests failed

https://learning.flatironschool.com/courses/1883/assignments/125694?module_item_id=259619

Two Flatiron TC just confirmed this lab is not working properly. Student is using Google Chrome. The React rendering is not visible despite the compiling correctly.

When? this.props.onReceiveCoordinates([event.clientX, event.clientY]);

this.props.onReceiveCoordinates([event.clientX, event.clientY]);

Just wondering, When did we learn about cllientX or where are we to perceive to get this information from? Seems to be a lab or something missing to explain this.

Learn is not completing although tests passed

Canvas Link

https://learning.flatironschool.com/courses/1883/assignments/125694?module_item_id=259619

Concern

All tests are marked as passed but terminal stalls thereby no posting a completed lab.

Additional Context

No response

Suggested Changes

No response

just a suggestion for this lab

since this is brand new stuff i'm (and most people) are learning at this point, it would be helpful to see the code that we are writing render in the browser.

Starting with this react lab, It appears the components you create don't render in the browser and i'm not sure if thats a sign of things to come in future labs. The visual rendition and ability to console log stuff etc is important when testing to see if things work. Not having that ability is really not helpful - its kinda like driving a car but not being able to see through the windshield.

cloned and ran $learn / would not allow tests to run

however $learn submit is working correctly