React: Checkbox does not uncheck when next question comes - reactjs

Question

I am working on a quiz component, where user can appear for test. Questions are shown one after another to user and user checks the right answer.
But I am facing the below issue.
Description:
Checkbox does not uncheck for next question. It remains checked, once user click on any of the checkbox.
Steps:
1. Click on any checkbox options for the question.
2. Click on next for next question. [checkbox is checked from previous question]
[]2
Expected:
When next question appears, the checkbox should not be checked.
Actual:
When next questions appears, the checkbox is checked.
Code: On click of next, this component gets its data as a props from parent component.
// This component show one question at a time
import React from 'react';
import TextEditorDisplay from '../../texteditor/TextEditorDisplay';
import Form from 'react-bootstrap/Form';
class TestComponent extends React.PureComponent {
handleCheck = (e, idx) => {
console.log('inside handleCheck',e.target.value)
this.props.setAnswerGivenByUser(idx, e.target.checked);
};
render() {
return (
<div className="container">
<h3 className="quiz-question">
<TextEditorDisplay editorContent={this.props.quizQuestion.question} />
</h3>
<Form>
<table>
<tbody>
{this.props.quizQuestion.options && this.props.quizQuestion.options.map((option, idx) => (
<tr key={idx}>
<td>
<Form.Group controlId="formBasicCheckbox">
<Form.Check type="checkbox" value={option.data} onChange={e => this.handleCheck(e, idx)}/>
</Form.Group>
</td>
<td>
<p key={idx}>{option.data}</p>
</td>
</tr>
))}
</tbody>
</table>
</Form>
</div>
);
}
}
export default TestComponent;
Parent component:
import React from 'react';
import TestComponent from '../components/skill-assessment/users/TestComponent';
import Button from 'react-bootstrap/Button';
import api from '../services/remote/api';
class TestHomePage extends React.PureComponent {
x = 0;
y = 0;
arr = [];
constructor(props) {
super(props);
this.getQuizQuestionsAsPerLevel = this.getQuizQuestionsAsPerLevel.bind(this);
this.state = {
quizQuestion: [],
show: true,
options: [],
answers: []
};
}
getIdFromUrl = () => {
var url = this.props.location.pathname;
var splitUrl = url.split('/');
return splitUrl[2].toString();
};
componentDidMount() {
this.getQuizQuestionsAsPerLevel(1);
this.getQuizQuestionsAsPerLevel(2);
this.getQuizQuestionsAsPerLevel(3);
this.getQuizQuestionsAsPerLevel(4);
this.getQuizQuestionsAsPerLevel(5);
this.getQuizQuestionsAsPerLevel(6);
console.log('component did mount arr', this.arr);
}
getQuizQuestionsAsPerLevel(level) {
try {
api.getQuizQuestionsAsPerLevel({ id: this.getIdFromUrl(), level: level }).then(response => {
this.arr.push(response.data);
console.log('arr inside api', this.arr);
});
} catch (exception) {
console.log('exception', exception);
}
}
addUserQandA() {
try {
api.addUserQandA({
quizId: this.getIdFromUrl(),
quizQandA: [{ quizQuestionId: this.state.quizQuestion._id }, { answers: this.state.answers }]
}).then(response => {
console.log('add QandA response', response);
});
} catch (exception) {
console.log('exception', exception);
}
}
nextQuestion = () => {
// send prev Question data to QandA
if (this.state.quizQuestion && this.state.answers) {
this.addUserQandA();
}
if (this.x < this.arr.length - 1 && this.y >= this.arr[this.x].length) {
this.x = this.x + 1;
this.y = 0;
this.setState({ quizQuestion: this.arr[this.x][this.y], answers: [] });
} else if (this.x < this.arr.length && this.y < this.arr[this.x].length) {
this.setState({ quizQuestion: this.arr[this.x][this.y] });
this.y = this.y + 1;
} else {
// hide next button and highlight submit button
this.setState({ show: false });
}
};
setAnswerGivenByUser = (answerId, shouldAdd) => {
const answers = this.state.answers.slice();
if (shouldAdd) {
if (!answers.includes(answerId)) {
answers.push(answerId);
}
} else {
if (answers.includes(answerId)) {
const answerIndex = answers(a => a === answerId);
answers.splice(answerIndex, 1);
}
}
this.setState({ answers });
};
render() {
console.log('answers', this.state.answers);
return (
<div className="container">
<TestComponent quizQuestion={this.state.quizQuestion} setAnswerGivenByUser={this.setAnswerGivenByUser} />
{this.state.show && (
<Button variant="primary" onClick={this.nextQuestion}>
Next
</Button>
)}
<Button variant="primary">Submit</Button>
</div>
);
}
}
export default TestHomePage;
quiz Data Strcuture

Answer 1

Not refreshing problem was caused by not forced rerenderings.
For each levels <tr /> elements was rendered with numbered key always starting from 0. This way next level renders was besed on exiting nodes (updating), not rendered as new ones. First not changed node (in sense of the same props) stops deeper analisys. In this case it stops on <Form.Group controlId="formBasicCheckbox"> - it's child is not updated even when option.data differs.
Solution
key is used for distinguish nodes rendered in loops. key should be unique. It should not be a number only ... they should be always unique.
Simple fix is to use additionally passed prop level:
<tr key={this.props.level * 10 + idx} />
In fact ... as <p key={idx}>{option.data}</p> was updated ... it should be enough to use this (or similar) unique key/prop for <Form.Group/> (f.e. controlId). Using unique on <tr/> level we're forcing render of a new structure (can be costly in some scenarios).