componentDidMount function in React - reactjs

Question

I am designing a quiz in React, and I am having one final problem with my code.
There are 7 questions in the MongoDB Database which I am pulling data from. The idea is, every time the "Next" button on my quiz is clicked, the next question should load after the user has answered the previous question. Currently, only the first question loads, and I am having trouble loading up the remaining questions. I have a componentDidMount function which I guess would be responsible for loading information from the MongoDB database.
componentDidMount() {
axios.get('/challenge', {
params: {
questionID: "Phish01",
//"Phish0" + this.state.currentQuestion;
},
})
For every question in the database, I have added a field named "questionID" which identifies the question. Since there are 7 questions, each question has an ID of Phish01, Phish02....Phish07.
Obviously looking at the code, only the first question loads up, which is fine. However, I am unsure as to the best method in loading up the remaining questions. I was thinking of using some form of concatenation as seen in the commented out piece of code above, but don't think that's the correct way of going about it.
I also was considering making a new function as seen below, but similar to before, I think I am doing it wrong.
/*setNextQuestion() {
axios.get('/challenge', {
params: {
questionID: "Phish0" + this.state.currentQuestion;
},
})
//questionID: "Phish0" + 1;
if (this.state.currentQuestion !== prevState.currentQuestion) {
this.setState(() => {
return{
disabled: true,
questionID: questionID,
}
});
}}*/
I thought I would also add this code sample in too:
constructor(props) {
super(props);
this.state = {
currentQuestion: 0,
userInput: null, // user has not answered a question yet at the start
points: 0,
options: [],
disabled: true, // Next button is disabled by default
optionEnabled: true, //options should be enabled by default
};
If anyone is able to help or point me towards a resource that would help me in understanding my issue, that would be great!
Thanks!
Added in the rest of the code file:
Class Challenge extends Component {
constructor(props) {
super(props);
this.state = {
currentQuestion: 0,
userInput: null, // user has not answered a question yet at the start
points: 0,
// options : ["Hello"],
options: [],
isLoaded: false,
quizzes: {},
disabled: true, // Next button is disabled by default
optionEnabled: true, //options should be enabled by default
intervalIsSet: false,
gameOver: false,
};
}
// this function below should be responsible for loading the data from the MongoDB database
componentDidMount() {
axios.get('/challenge', {
params: {
questionID: "Phish01",
//"Phish0" + this.state.currentQuestion;
},
})
.then((response) => {
const result = response.data;
console.log(response.data);
this.setState({
isLoaded: true,
quizzes: result,
options: result.options,
answer: result.answer,
answerDetails: result.answerDetails,
wrongAnswer: result.wrongAnswer,
});
}).catch((error) => {
this.setState({
isLoaded: true,
error,
});
});
}
nextQuestion = () => {
const { chosenAnswer, answer, points } = this.state;
alert(this.state.wrongAnswer);
alert(this.state.answerDetails);
if (chosenAnswer === answer) {
this.setState({
points: this.state.points + 1
});
}
this.setState({
currentQuestion: this.state.currentQuestion + 1
});
console.log(this.state.currentQuestion);
};
//this function should be responsible for loading the remaining questions
/*setNextQuestion() {
axios.get('/challenge', {
params: {
questionID: "Phish0" + this.state.currentQuestion;
},
})
//questionID: "Phish0" + 1;
if (this.state.currentQuestion !== prevState.currentQuestion) {
this.setState(() => {
return{
disabled: true,
questionID: questionID,
}
});
}
}*/
lastQuestion = () => {
if (this.state.currentQuestion === 7) { //array starts at 0
this.setState({
gameOver: true
});
}
};
//when user clicks on an option, the "Next" button should then be enabled
checkAnswer(chosenAnswer) {
if (chosenAnswer == this.state.answer) {
alert('You have chosen the correct answer!');
alert('Click Next to continue');
this.setState({
disabled: false,
optionEnabled: false,
});
//alert(this.state.answerDetails);
} else {
alert('You have selected the wrong answer');
alert('Click Next to continue');
this.setState({
disabled: false,
optionEnabled: false,
});
}
}
render() {
const {options, userInput, currentQuestion, gameOver} = this.state;
if (gameOver) {
return (
<div className="result">
<h3>The quiz is over. Final score is {this.state.points} points</h3>
</div>
);
} else {
return (
<div className="quizChallenge">
<h2>{this.state.quizzes.description} </h2>
<table id="t01">
<tbody>
<tr>
{this.state.options.map((option) => {
return (
<td key={option}>
<button
disabled={!this.state.optionEnabled}
onClick={() => this.checkAnswer(this.state.options.indexOf(option))}>
{option}
</button></td>
);
})}
</tr>
</tbody>
</table>
{currentQuestion < 8 &&
<button
className="ui inverted button"
disabled={this.state.disabled}
onClick={this.nextQuestion}
>Next
</button>
}
{currentQuestion === 7 &&
<button
className="ui inverted button"
disabled={this.state.disabled}
onClick={this.lastQuestion}
>Finish Challenge!
</button>
}
</div>
);
}
}
}
export default Challenge;