React setState when score is 0 - reactjs

Question

I am working on a quiz and now I would like to show different messages to the user depending on what score they have. This code is working but I when the score is 0 no new state is set.
It seems to have something to do with that prevProps.score is only triggered when you have answered something correctly. Is there some other conditional I could use instead maybe?
Below is all code in current state:
class App extends React.Component {
constructor(props) {
super(props);
// Make it somewhat harder for cheaters to inspect the correct answer.
document.getElementById('quiz').setAttribute('data-props', '');
const data = JSON.parse(this.props.quiz);
this.state = {
data: data,
nr: 0,
total: data.length,
showButton: false,
questionAnswered: false,
score: 0,
popUpClass: 'popup-visible',
quizVisible: false,
id: data[0].id,
question: data[0].question,
answers: [
data[0].answers[0],
data[0].answers[1],
data[0].answers[2],
data[0].answers[3]
],
correct: data[0].correct
}
this.nextQuestion = this.nextQuestion.bind(this);
this.handleShowButton = this.handleShowButton.bind(this);
this.handleStartQuiz = this.handleStartQuiz.bind(this);
this.handleIncreaseScore = this.handleIncreaseScore.bind(this);
}
pushData(nr) {
const data = this.state.data;
this.setState({
question: data[nr].question,
answers: [data[nr].answers[0], data[nr].answers[1], data[nr].answers[2], data[nr].answers[3] ],
correct: data[nr].correct,
nr: this.state.nr + 1
});
}
nextQuestion() {
let { nr, total} = this.state;
if(nr === total){
this.setState({
popUpClass: 'popup-visible',
quizVisible: false
});
} else {
this.pushData(nr);
this.setState({
showButton: false,
questionAnswered: false,
quizVisible: true
});
}
}
handleShowButton() {
this.setState({
showButton: true,
questionAnswered: true
});
}
handleStartQuiz() {
this.setState({
popUpClass: 'popup-hidden',
quizVisible: true,
nr: 1
});
}
handleIncreaseScore() {
this.setState({
score: this.state.score + 1
});
}
render() {
let { nr, total, id, question, answers, correct, showButton, questionAnswered, popUpClass, quizVisible, score} = this.state;
return (
<div className="app-container">
<Popup className={popUpClass} score={score} total={total} startQuiz={this.handleStartQuiz} key={nr} />
{quizVisible ?
(
<div key={question} className="quiz">
<div className="quiz-box">
<span className="question-total">Fråga {nr} av {total}</span>
<h2 className="question">{question}</h2>
<Answers
key={id}
answers={answers}
correct={correct}
showButton={this.handleShowButton}
isAnswered={questionAnswered}
increaseScore={this.handleIncreaseScore} />
</div>
<div id="submit">
{showButton ? <button className="fancy-btn" onClick={this.nextQuestion} id={nr === total ? 'finishQuiz' : null}>{nr === total ? 'Slutför quiz' : 'Nästa fråga'}</button> : null}
</div>
</div>
) : null}
</div>
);
}
};
class Popup extends React.Component {
constructor(props) {
super(props);
this.state = {
title: 'Quiz',
showStartButton: true
};
this.startQuizHandle = this.startQuizHandle.bind(this);
}
startQuizHandle() {
this.props.startQuiz();
}
componentDidUpdate(prevProps) {
let total = this.props.total;
let highScore = total - 2;
let halfScore = total / 2;
if (this.props.score !== prevProps.score) {
if (this.props.score >= highScore) {
this.setState({
title: 'You are an expert!',
})
} else if (this.props.score >= halfScore && this.props.score <= highScore) {
this.setState({
title: 'You are pretty good at this!'
})
}
else if (this.props.score < halfScore && this.props.score > 0) {
console.log('score less than half');
this.setState({
title: 'You need some practice.'
})
}
else {
this.setState({
title: 'You did not do too well.',
})
}
}
}
createMarkup(text) {
return {__html: text};
}
render() {
let { title, intro, text, showStartButton } = this.state;
let { className } = this.props;
return (
<div className={`popup-container ${ className }`}>
<div className="popup">
<h1>{title}</h1>
</div>
{showStartButton ? <button className="fancy-btn" onClick={this.startQuizHandle}>Start Quiz</button> : null}
</div>
);
}
}
export default Popup
class Answers extends React.Component {
constructor(props) {
super(props);
this.state = {
isAnswered: false,
classNames: ['', '', ''],
isDisabled: false
}
this.checkAnswer = this.checkAnswer.bind(this);
}
checkAnswer(e) {
let { isAnswered } = this.props;
this.setState({
isDisabled: true
})
if (!isAnswered) {
let elem = e.currentTarget;
let { correct, increaseScore } = this.props;
let answer = Number(elem.dataset.id);
let updatedClassNames = this.state.classNames;
if (answer === correct) {
updatedClassNames[answer - 1] = 'right';
increaseScore();
}
else {
updatedClassNames[answer - 1] = 'wrong';
}
this.setState({
classNames: updatedClassNames
})
this.props.showButton();
}
}
render() {
let { answers } = this.props;
let { classNames } = this.state;
const { isDisabled } = this.state;
return (
<div id="answers">
<ul>
<li onClick={this.checkAnswer} className={classNames[0]} data-id="1"><p className={isDisabled ? "disabled" : null}><span>A</span> {answers[0]}</p></li>
<li onClick={this.checkAnswer} className={classNames[1]} data-id="2"><p className={isDisabled ? "disabled" : null}><span>B</span> {answers[1]}</p></li>
<li onClick={this.checkAnswer} className={classNames[2]} data-id="3"><p className={isDisabled ? "disabled" : null}><span>C</span> {answers[2]}</p></li>
</ul>
</div>
);
}
}
export default Answers

Answer 1

Convert your last else if to an else so your conditional tests are as follows:
if score >= high score => "...expert!"
else if half score <= score < high score => "... petty good"
else if 0 < score < half score => "..need practice"
else => "did not do so well"
This is the "catch-all" branch of logic for scores that didn't fall into one of the previous test cases.
componentDidUpdate
componentDidUpdate(prevProps) {
let total = this.props.total;
let highScore = total - 2;
let halfScore = total / 2;
const { score } = this.props;
if (score !== prevProps.score) {
if (score >= highScore) {
this.setState({
title: "You are an expert!"
});
} else if (score >= halfScore && score <= highScore) {
this.setState({
title: "You are pretty good at this!"
});
} else if (score < halfScore && score > 0) {
this.setState({
title: "You need some practice."
});
} else {
this.setState({
title: "You did not do too well."
});
}
}
}
Edit
Looks like your initial quiz state is to have total be the length of the data array (presumably the quiz questions?) and score starting at 0. From your logic it is clear score monotonically increases from 0. I think the piece that is missing from the Popup component is checking this "initial state" where the score === 0. My guess is you see the title start at "Quiz" and then after the first correct answer it updates to "You need some practice.". A small refactor of the "checking score" logic within componentDidUpdate will allow you to check it when Popup first mounts when the score is 0.
checkScore = () => {
const { score, total } = this.props;
const highScore = total - 2;
const halfScore = total / 2;
if (score >= highScore) {
this.setState({
title: "You are an expert!"
});
} else if (score >= halfScore && score < highScore) {
this.setState({
title: "You are pretty good at this!"
});
} else if (score < halfScore && score > 0) {
this.setState({
title: "You need some practice."
});
} else {
this.setState({
title: "You did not do too well."
});
}
}
componentDidMount() {
this.checkScore();
}
componentDidUpdate(prevProps) {
const { score } = this.props;
if (prevProps.score !== score) {
this.checkScore();
}
}
Updated the above linked codesandbox.