samedi 1 février 2020

React: Checkbox does not uncheck when next question comes

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. enter image description here 2. Click on next for next question. [checkbox is checked from previous question] [enter image description here]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;



Aucun commentaire:

Enregistrer un commentaire