react-component-mounting-lab's Issues
Test description doesn't make sense—copy/pasta?
The test talks about "adding a quote" but unless I'm missing something, that doesn't make sense? Guessing it's a copy/paste from some other lab.
Suggested alternative: "should start with one Timer already running" since it's testing to make sure you put this.handleAddTimer()
into componentDidMount
.
Remove the letter e
Need to remove the letter "e" at the end of this sentence:
"The timer is still not working, but that's okay for now.e"
Thank you.
Sinon error
Hi,
My code works perfectly and is identical to the solution code, but I get the following error:
- calls componentDidMount and adds a quote: TypeError: Attempted to wrap undefined property componentDidMount as function at wrapMethod (node_modules/sinon/lib/sinon/util/core/wrap-method.js:70:21) at Function.spy (node_modules/sinon/lib/sinon/spy.js:45:16) at spy (node_modules/sinon/lib/sinon/sandbox.js:274:26) at Context. (test/index.test.js:17:5)
I haven't touched the sinon file or anything like that. Here is my code for comparison:
import React, { Component } from 'react';
import Timer from './Timer'
class App extends Component {
//no props being used here, so we can use the shorthand declaration of state
state = {
timerIDs: []
}
componentDidMount = () => {
this.handleAddTimer()
}
//Your code here:
// No need to modify anything in render or the class methods below
// Unless, of course, you're curious about how it all works
render() {
return (
<div className="App">
<h1>MultiTimer</h1>
<button onClick={this.handleAddTimer}>Add New Timer</button>
<div className="TimerGrid">
{this.renderTimers()}
</div>
</div>
);
}
// returns array of components written in JSX, mapped from this.state.timerIDs
renderTimers = () => this.state.timerIDs.map(id => {
return <Timer key={id} id={id} removeTimer={this.removeTimer} />
})
// adds a random number for timer ID
handleAddTimer = () => {
this.setState(prevState => ({
timerIDs: [...prevState.timerIDs, Math.floor(Math.random()*1000)]
}))
}
// removeTimer updates state, removing any timer that matches the provided author
removeTimer = id => {
this.setState(prevState => ({
timerIDs: prevState.timerIDs.filter(timer_id => timer_id !== id)
}))
}
}
export default App;
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.