learn-co-curriculum / react-dynamic-components-lab Goto Github PK
View Code? Open in Web Editor NEWLicense: Other
License: Other
all tests passing & lesson submitted, but "run local tests" not showing as completed. not giving option for "next lesson" (have to navigate via course dropdown menu) and not showing completed in course dropdown menu
For future students - if you meet an error upon running npm start
along the lines of "would you like to set a default browser...", take a look at the top of this Readme.
Adding the below to package.json
will enable you to bypass this message, start up a server, and actually proceed with the lab.
"browserslist": [ "defaults", "not IE 11", "not IE_Mob 11", "maintained node versions" ]
`// ♥ npm test
[email protected] test
mocha --timeout 5000 -w test/helpers.js test/*.js
Warning: Could not find any test files matching pattern: test/helpers.js
This browser doesn't support requestAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills
This browser doesn't support cancelAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills
ReferenceError: React is not defined
at Object. (/home/igor/dev/flatiron/labs/react-dynamic-components-lab/src/Comment.js:1:23)
at Module._compile (node:internal/modules/cjs/loader:1083:30)
at loader (/home/igor/dev/flatiron/labs/react-dynamic-components-lab/node_modules/babel-register/lib/node.js:144:5)
at Object.require.extensions. [as .js] (/home/igor/dev/flatiron/labs/react-dynamic-components-lab/node_modules/babel-register/lib/node.js:154:7)
at Module.load (node:internal/modules/cjs/loader:948:32)
at Function.Module._load (node:internal/modules/cjs/loader:789:14)
at Module.require (node:internal/modules/cjs/loader:972:19)
at require (node:internal/modules/cjs/helpers:88:18)
at Object. (/home/igor/dev/flatiron/labs/react-dynamic-components-lab/test/index-test.js:10:1)
at Module._compile (node:internal/modules/cjs/loader:1083:30)
at loader (/home/igor/dev/flatiron/labs/react-dynamic-components-lab/node_modules/babel-register/lib/node.js:144:5)
at Object.require.extensions. [as .js] (/home/igor/dev/flatiron/labs/react-dynamic-components-lab/node_modules/babel-register/lib/node.js:154:7)
at Module.load (node:internal/modules/cjs/loader:948:32)
at Function.Module._load (node:internal/modules/cjs/loader:789:14)
at Module.require (node:internal/modules/cjs/loader:972:19)
at require (node:internal/modules/cjs/helpers:88:18)
at /home/igor/dev/flatiron/labs/react-dynamic-components-lab/node_modules/mocha/lib/mocha.js:250:27
at Array.forEach ()
at Mocha.loadFiles (/home/igor/dev/flatiron/labs/react-dynamic-components-lab/node_modules/mocha/lib/mocha.js:247:14)
at Mocha.run (/home/igor/dev/flatiron/labs/react-dynamic-components-lab/node_modules/mocha/lib/mocha.js:576:10)
at loadAndRun (/home/igor/dev/flatiron/labs/react-dynamic-components-lab/node_modules/mocha/bin/_mocha:594:22)
at Object. (/home/igor/dev/flatiron/labs/react-dynamic-components-lab/node_modules/mocha/bin/_mocha:611:3)
at Module._compile (node:internal/modules/cjs/loader:1083:30)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1112:10)
at Module.load (node:internal/modules/cjs/loader:948:32)
at Function.Module._load (node:internal/modules/cjs/loader:789:14)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:72:12)
at node:internal/main/run_main_module:17:47
(node:1741) DeprecationWarning: "--compilers" will be removed in a future version of Mocha; see https://git.io/vdcSr for more info
(Use node --trace-deprecation ...
to show where the warning was created)`
Tests are broken
If you run a test on a solution, you'll notice the difference.
all tests pass, but not reflecting in learn.co
https://learning.flatironschool.com/courses/1883/assignments/125692?module_item_id=259605
All tests are marked as passed but terminal stalls thereby no posting a completed lab.
No response
No response
Under Comment
component, it has to be "Create a Comment
component instead of Component
component. Simple mistyping :)
ColorBox instructions say:
if the opacity value is greater than or equal to 0.1:
but tests won't pass unless value used is >= 0.2, this value is also used in the solution
[10:18:16] (master) react-dynamic-components-lab-online-web-sp-000
// ♥ Traceback (most recent call last):
11: from /usr/local/rvm/gems/ruby-2.6.1/bin/ruby_executable_hooks:24:in <main>' 10: from /usr/local/rvm/gems/ruby-2.6.1/bin/ruby_executable_hooks:24:in
eval'
9: from /usr/local/rvm/gems/ruby-2.6.1/bin/learn-test:23:in <main>' 8: from /usr/local/rvm/gems/ruby-2.6.1/bin/learn-test:23:in
load'
7: from /usr/local/rvm/gems/ruby-2.6.1/gems/learn-test-2.6.1/bin/learn-test:68:in <top (required)>' 6: from /usr/local/rvm/gems/ruby-2.6.1/gems/learn-test-2.6.1/lib/learn_test/runner.rb:20:in
run'
5: from /usr/local/rvm/gems/ruby-2.6.1/gems/learn-test-2.6.1/lib/learn_test/runner.rb:20:in fork' 4: from /usr/local/rvm/gems/ruby-2.6.1/gems/learn-test-2.6.1/lib/learn_test/runner.rb:21:in
block in run'
3: from /usr/local/rvm/gems/ruby-2.6.1/gems/learn-test-2.6.1/lib/learn_test/runner.rb:44:in report_and_clean' 2: from /usr/local/rvm/gems/ruby-2.6.1/gems/learn-test-2.6.1/lib/learn_test/reporter.rb:13:in
report'
1: from /usr/local/rvm/gems/ruby-2.6.1/gems/learn-test-2.6.1/lib/learn_test/reporter.rb:47:in report' /usr/local/rvm/gems/ruby-2.6.1/gems/learn-test-2.6.1/lib/learn_test/strategies/mocha.rb:42:in
results': undefined method `[]' for nil:NilClass
(NoMethodError)
There is a typo I believe at the end of the third paragraph of the Introduction section.
All of the css has been provided, as well as a good amount of starter code. The general structure has already been provided - you are to pick up where the code leaves off and make both the Comment and the ColorBox components behave dynamically**.f**
Using the model code, I could not get the ColorBox to render.
Given code:
render() {
const newValue = this.props.value * 2;
if (this.props.value < 100) {
return (
<div>
<Example value={newValue} />
</div>
);
} else {
return null;
}
}
}```
My ColorBox code:
```import React, { Component } from 'react';
export default class ColorBox extends Component {
render() {
const newValue = this.props.opacity - 0.1;
if (this.props.opacity >= 0.2) {
return (
<div>
<ColorBox opacity={newValue} />
</div>
);
} else {
return null;
}
}
}```
Additionally, the solution code uses a different approach.
This is minor, but just a bit misleading. In the provided code, the comment in the ColorBox component that says where to put your conditional statement is inside the return statement. It's also inside the div, which is again misleading because in the provided code the opacity value is explicitly stated, when it should really be a prop. To successfully have any conditional statement, it should be outside of the return, and offer a return option for each outcome.
Current starting code:
render() { return ( <div className="color-box" style={{opacity: 2}}> {/* your conditional code here! */} </div> ) }
Less misleading starting code:
render() { if ( {/* your conditional statement here! */} ) { return ( <div className="color-box" style={{ /* reference to opacity */ }}> {/* code to run if conditional is met */} </div> ) } else { return ( {/* code to run if it is not met */} ) } }
Or idk, maybe it doesn't need to be so explicit as to lay out the if statement entirely. It is (almost) a regular JS if statement with conditional returns, which was covered in the last unit. But since there are some differences between JSX and vanilla JS, putting a comment to specifically add the conditional inside both the return and the div is confusing because it could appear to be one of those differences to someone that is new to React.
Students were having some issues with learn test
. TCs were able to resolve the issue and get tests running without issue by doing the following tasks:
add "whatwg-url": "8.0.0" to the dependencies in package.json
delete package-lock.json file & node-modules folder
run npm install again
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.