Code Monkey home page Code Monkey logo

react-updating-state-lab's Introduction

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 for the fact that they will both use setState() to update their internal states.

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

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. IMPORTANT: remember that if you want to change any value in any object, you may want to spread the said object, as we mentioned in the previous lab.

  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.

Note: Remember that all React components must act like pure functions with respect to their props, and thus can only return one element. Returning multiple elements can be accomplished by wrapping them in a wrapper element.

Resources

react-updating-state-lab's People

Contributors

annjohn avatar gj avatar graciemcguire avatar ihollander avatar kjleitz avatar lukeghenco avatar maxwellbenton avatar pletcher avatar sylwiavargas avatar thomastuts avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-updating-state-lab's Issues

npm server - error when try to start server

when use "npm server" server does not start, error messages result. When follow instructions to resolve, does not resolve. Therefore, just used "tests" with no browser feed-back for this lab.

Previous State has not been covered

The idea of grabbing information from a previous state hasn't yet been covered in labs. It should be mentioned, at the very least, and preferably covered explicitly in a ReadMe or lab.

Error when using bundle script

When using npm run bundle or yarn run bundle to execute Browserify script, the following error comes up.

Error: Cannot find module 'react-test-renderer/shallow' from '/Users/stevefrost/Development/react-updating-state-lab-v-000/node_modules/enzyme/build'

This is fixed by adding react-test-renderer as a devDependencies in package.json. I've created a pull request that can be found here if this fixes the issue for you as well.

Missing critical information about YouTubeDebugger

The README doesn't indicate this, but in order for the YouTubeDebugger tests to work, you need to wrap the <button>s in a <div> or some other HTML element.

Here's what I did initially (without giving away the whole solution):

render() {
    return ([
      <button></button>,
      <button></button>
    ])
  }

It worked in the Chrome browser, but the test output looked like this:

1) <YouTubeDebugger /> should have the correct initial state:
     Error: Method “state” is meant to be run on 1 node. 2 found instead.
      at ShallowWrapper.single (node_modules/enzyme/src/ShallowWrapper.js:1652:13)
      at ShallowWrapper.state (node_modules/enzyme/src/ShallowWrapper.js:1194:25)
      at Context.<anonymous> (test/index-test.js:55:20)
      at processImmediate (internal/timers.js:456:21)

  2) <YouTubeDebugger /> should update the bitrate when the `.bitrate` button is clicked:
     Error: Method “setState” is meant to be run on 1 node. 2 found instead.
      at ShallowWrapper.single (node_modules/enzyme/src/ShallowWrapper.js:1652:13)
      at ShallowWrapper.setState (node_modules/enzyme/src/ShallowWrapper.js:742:10)
      at YouTubeDebugger.ShallowWrapper.instance.setState (node_modules/enzyme/src/ShallowWrapper.js:422:66)
      at YouTubeDebugger._this.changeBitrate (src/components/YouTubeDebugger.js:21:10)
      at node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:716:13
      at withSetStateAllowed (node_modules/enzyme-adapter-utils/src/Utils.js:99:18)
      at Object.simulateEvent (node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:712:11)
      at ShallowWrapper.<anonymous> (node_modules/enzyme/src/ShallowWrapper.js:1134:7)
      at ShallowWrapper.single (node_modules/enzyme/src/ShallowWrapper.js:1654:21)
      at ShallowWrapper.simulate (node_modules/enzyme/src/ShallowWrapper.js:1133:17)
      at Context.<anonymous> (test/index-test.js:63:30)
      at processImmediate (internal/timers.js:456:21)

  3) <YouTubeDebugger /> should update the video resolution when the `.resolution` button is clicked:
     Error: Method “setState” is meant to be run on 1 node. 2 found instead.
      at ShallowWrapper.single (node_modules/enzyme/src/ShallowWrapper.js:1652:13)
      at ShallowWrapper.setState (node_modules/enzyme/src/ShallowWrapper.js:742:10)
      at YouTubeDebugger.ShallowWrapper.instance.setState (node_modules/enzyme/src/ShallowWrapper.js:422:66)
      at YouTubeDebugger._this.changeVideoResolution (src/components/YouTubeDebugger.js:32:10)
      at node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:716:13
      at withSetStateAllowed (node_modules/enzyme-adapter-utils/src/Utils.js:99:18)
      at Object.simulateEvent (node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:712:11)
      at ShallowWrapper.<anonymous> (node_modules/enzyme/src/ShallowWrapper.js:1134:7)
      at ShallowWrapper.single (node_modules/enzyme/src/ShallowWrapper.js:1654:21)
      at ShallowWrapper.simulate (node_modules/enzyme/src/ShallowWrapper.js:1133:17)
      at Context.<anonymous> (test/index-test.js:73:33)
      at processImmediate (internal/timers.js:456:21)

In order to get the tests passing, I had to wrap the <button> elements in a <div>:

render() {
    return (
      <div>
        <button></button>
        <button></button>
      </div>
    )
  }

As I said above, though, the README doesn't tell us to do this at all.

Thanks, as always, for looking into this!

Sdcrouse

Spread operator

The curriculum states the spread operator is recommended so I think the solution should prioritize that solution, rather than the object.assign().

Also, the solution for updating the digital clicker is MUCH MORE COMPLEX than necessary, and includes life-cycle components, even tho that is 2 sections ahead.
solution should be:
handleClick = () => {
this.setState({
timesClicked: ++ this.state.timesClicked
})
}

Code snippet incorrect

This component has several state properties. The initial state shape looks like this: js { errors: [], user: null, settings: { bitrate: 8, video: { resolution: '1080p' } } }

Routes to wrong 'Next' lab

Canvas Link

https://learning.flatironschool.com/courses/1883/assignments/125708?module_item_id=259621

Concern

Clicking 'Next' skips over the 'React Controlled Components' code-a-long lab.

Additional Context

Not sure if it is buggy on my end but I refreshed the page and tried it a couple times and it keeps skipping the lab. I didn't realize I skipped it till I completed the lab before the reading and code-a-long.

Suggested Changes

Adjust link so that it connects to the proper lab.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.