Class Component State and Events Lab

Learning Goals

  • Refactor a function component with useState to a class component
  • Handle events in class components using arrow functions

Instructions

In this lab is the working code from a previous lesson, using function components. If you run the tests now, they should all pass, except for the tests checking that you are using class components instead of functions. Your goal is to refactor all the components in the src/components directory to use classes instead of functions, and still have the tests passing.

Start by familiarizing yourself with the code and the functionality, then work through each component and convert them to class components.

Make sure to pay attention to syntax (and in particular, this and arrow functions). Also make sure you are initializing and setting state correctly.

Resources