This community-built FAQ covers the “componentDidUpdate” exercise from the lesson “Updating/Unmounting Lifecycle Methods”.
Paths and Courses
This exercise can be found in the following Codecademy content:
Web Development
Learn ReactJS: Part II
FAQs on the exercise componentDidUpdate
Join the Discussion. Help a fellow learner on their journey.
Ask or answer a question about this exercise by clicking reply ( ) below!
Agree with a comment or answer? Like ( ) to up-vote the contribution!
Need broader help or resources ? Head here .
Looking for motivation to keep learning? Join our wider discussions .
Learn more about how to use this guide.
Found a bug ? Report it!
Have a question about your account or billing? Reach out to our customer support team !
None of the above? Find out where to ask other questions here !
_31337
April 17, 2020, 7:53pm
2
Not sure how to feel about this Top Number game , after each chapter I was expecting game to work properly, but in the end it didn’t :\ I caught 950341 which is > 950000 after that game went nuts, number start popping like crazy. But conditions were still “default” , and later when the new game started. Background din’t change to white.
//TopNumber.js
componentWillUpdate(nextProps, nextState) {
if (document.body.style.background !== yellowColor && this.state.highest >= 950*1000) {
document.body.style.background = yellowColor;
} else if (!this.props.game && nextProps.game) {
document.body.style.background = 'white';
}
}
In the explanation of componentDidUpdate it states:
componentDidUpdate
is usually used for interacting with things outside of the React environment, like the browser or APIs. It’s similar to componentWillUpdate
in that way, except that it gets called after render
instead of before .
In App.js the componentDidUpdate() is located before render().
Can someone please explain? or what am I misinterpreting?
import { Target } from './Target';
import { random, clone } from './helpers';
const fieldStyle = {
position: 'absolute',
width: 250,
bottom: 60,
left: 10,
height: '60%',
};
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
game: false,
targets: {},
latestClick: 0
};
this.intervals = null;
this.hitTarget = this.hitTarget.bind(this);
this.startGame = this.startGame.bind(this);
this.endGame = this.endGame.bind(this);
}
componentDidUpdate(prevProps, prevState) {
if (this.state.latestClick < prevState.latestClick) {
this.endGame();
}
}
createTarget(key, ms) {
ms = ms || random(500, 2000);
this.intervals.push(setInterval(function(){
let targets = clone(this.state.targets);
let num = random(1, 1000*1000);
targets[key] = targets[key] != 0 ? 0 : num;
this.setState({ targets: targets });
}.bind(this), ms));
}
hitTarget(e) {
if (e.target.className != 'target') return;
let num = parseInt(e.target.innerText);
for (let target in this.state.targets) {
let key = Math.random().toFixed(4);
this.createTarget(key);
}
this.setState({ latestClick: num });
}
startGame() {
this.createTarget('first', 750);
this.setState({
game: true
});
}
endGame() {
this.intervals.forEach((int) => {
clearInterval(int);
});
this.intervals = [];
this.setState({
game: false,
targets: {},
latestClick: 0
});
}
componentWillMount() {
this.intervals = [];
}
render() {
let buttonStyle = {
display: this.state.game ? 'none' : 'inline-block'
};
let targets = [];
for (let key in this.state.targets) {
targets.push(
<Target
number={this.state.targets[key]}
key={key} />
);
}
return (
<div>
<TopNumber number={this.state.latestClick} game={this.state.game} />
<Display number={this.state.latestClick} />
<button onClick={this.startGame} style={buttonStyle}>
New Game
</button>
<div style={fieldStyle} onClick={this.hitTarget}>
{targets}
</div>
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('app')
);