License: Other

Shell 9.88% HTML 17.90% JavaScript 72.22%

react-updating-state-lab's People

Watchers

Forkers

steveafrost bhabig dom-mc yberdysh salsa-dude deggiedev dannyenfp madeline-stark kat-star adamlarosa emileypalmquist urfan196 mustafa-al-shaheri petersampson010 clarkj99 gnardinosaur assansav andresmanco munroe1786 bonjourannie chrisbaptiste83 ericiscoding chriskay25 sdcrouse stefclaus milobravman kaladajumbo conradbuys11 melindadiaz07 dickm19 billyott joshua-flatiron jmlovitsch kylefarmer85 laurencun h11z noble-webb mikesap jrwatson94 barbarakuofie sagbeyeg i-am-lain zackcarlson014 j2b2590 tjbigelow stacksonstack bjf-flatiron see-bet-code tincogs caseyokay victorsloop jomariepolanco techtwin jaquan1314 dyson1602 warrenniu patriciaarnedo betalantz leemichalee nnhk23 mkoenke alexriosdev arielvgrubbs raaynaldo marisayou gamil91 wlytle tolentinoel jacobkagon metrio stephenvincentibanez inee-ader will-gon mathlete01 jpeterson14 johncodez crrojas88 chrisdemahy hugorod19 jdains27 stevenwutg bryan-bot jetechny iizzylca acparkgh denaweiss5 muhidin123 var787 hamoose18 danajackson2 thequeenbeebs kirstybrews dwisecar tbustama maryannn28 bbtrombone01 emmafewer milanwinter racross1 dangnhon

react-updating-state-lab's Issues

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

Error: Method “simulate” is only meant to be run on a single node. 0 found instead.

If a student is receiving this error, check that inside their JSX, className is defined correctly

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

Problem with tests and bitrate.

On my end, bitrate changes to 12, yet the tests argues that it is 8.

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.

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
})
}

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.

learn-co-curriculum / react-updating-state-lab Goto Github PK