React Updating State Lab

Overview

In this lab, you'll update state using setState().

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.

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

Note: the classes are added 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