React Event System Lab


In this lab you'll respond to events in React and write event handlers.

Note: The components are not defined yet, but the files are present. Before the tests will run, you must export components from EyesOnMe.js and Keypad.js. To get started, write very basic components that you know will not pass all the tests, but at least be valid React.



Mr. Burns has requested us to build a new keypad component for the nuclear plant, since the last one was way too complicated for his employees to use. We'll keep things super simple instead, and use an <input type="password" /> field to capture input. Here's how to complete the exercise:

  1. In the components/Keypad.js file, create a Keypad React component.
  2. In that component, render an input with the right type.
  3. On that input, add an event handler that listens for the keyUp event.
  4. When that event fires, use console.log to print out the text 'Entering password...'.

Eyes on the ball

Let's say you're in the club with your buddy. The music's blaring, lights are flashing... It's so hard to get his attention! Your job is to create a component that registers whenever he focuses on you, and when his eyes are drifting off.

  1. In the components/EyesOnMe.js file, create a EyesOnMe React component.
  2. In that component, render a button.
  3. On that button, add event handlers that listens for the focus and blur events.
  4. When the focus event fires, use console.log to print out the text 'Good!'.
  5. When the blur event fires, use console.log to print out the text 'Hey! Eyes on me!'.


Unlock your future in tech
Learn to code.

Learn about Flatiron School's Mission

With a new take on education that falls somewhere between self-taught prodigy and four-year computer science degree, the Flatiron School promises to turn students with little programming experience into developers.

In the six months since the Manhattan coding school was acquired by WeWork, it has spawned locations in Washington, D.C., Brooklyn, and London. Now, WeWork is opening a fourth Flatiron School location, this time in Houston.

Adam Enbar, Flatiron School's cofounder, believes now is the time to grow. "How the world is changing has impacted working and learning in very similar ways. We think education fundamentally is about one thing: enabling people to pursue a better life."

Learn. Love. Code.
Students come to Flatiron School to change their lives. Join our driven community of career-changers and master the skills you need to become a software engineer or a data scientist.
Find Us