React Updating State Lab

Overview

In this lab, you'll update state using setState(). After running npm install and npm start, you'll see that this app is not currently working. Your task is to build and export two components. These components are unrelated except in that they but will use setState() to update their internal state.

World Record Click Counter

Oldtimer stuff

We got a new job! Woo! This time, we're a judge for the Guinness World Records. We're no ordinary judge, however — we're a modern day judge. We do things using computers. Instead of using those old, clunky clickity-things to count stuff for world records, we'll write our very own digital clicker!

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

  2. This component has an initial state property called timesClicked, which is initially defined as 0.

  3. The component renders out a button with a label that shows the timesClicked value. This means that, at the start, your button should just say 0.

  4. Whenever the button is clicked, update the state by incrementing the timesClicked by 1.

HINT: At the moment, src/index.js is trying to import DigitalClicker and the next component, YouTubeDebugger. To be able to see your progress as you build out DigitalClicker, you can comment out the second component by wrapping it in curly braces and comment indicators:

{/*<YouTubeDebugger />*/}

Don't forget to remove these before you begin building the second component!

Debugging YouTube

Spock

You can only count so many jumps, hula-hoop rotations, and hot dogs being devoured before you go insane. Time to move on from our record judge job to greener pastures! Not to worry, we've secured ourselves a gig at YouTube this time! Our first task is to create some sort of debug bar that allows us to control the simulated network conditions on YouTube. Among other things, we can change our resolution, the bitrate of the videos, the audio quality, and so on.

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

  2. This component has several state properties. The initial state shape looks like this:

{
  errors: [],
  user: null,
  settings: {
    bitrate: 8,
    video: {
      resolution: '1080p'
    }
  }
}
  1. Create a button with the class 'bitrate'. Clicking this button changes the settings.bitrate state property to 12.

  2. Create a button with the class 'resolution'. Clicking this button changes the settings.video.resolution state property to '720p'.

A Note on Classes in React

Classes can be added as attributes in JSX, similar to HTML. The one difference to remember is that in JSX, we must use the className attribute, rather than class. Using class will cause an error while testing. Classes are used in this lab to make testing your solution a little easier.

Resources

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