lundi 17 août 2020

Multiple choice quiz in React chooses a checkbox automatically, if you uncheck it, it sends the answer

I chose checkboxes, at the beginning of the quiz the boxes are unchecked. After you check a box it goes to the next question, however, the check box stays checked. How do I uncheck the checkbox after it has been checked.

Server----

const quizQuestions = [];
//this is the endpoint that triggers the quiz to begin, if you close and quiz and come back this endpoint will take you to the question you left off on
app.get('/quiz', (req, res) => {
    let filteredQuestions = quizQuestions.filter((question) => {
        return !question.answered;
    });
    if (filteredQuestions.length < 1) {
        //console.log(filteredQuestions);
        endGame(res);
    }
    //here I am generating a random index to allow me to randomize the questions
    let randomIdx = Math.floor(Math.random() * 100) % filteredQuestions.length;
    let question = filteredQuestions[randomIdx];
    res.json(question);
});

SRC: function Question(props) { const [checked, setChecked] = React.useState("") return ( <> {props.question.question}

{props.question.answers.map((element, index) => (
//element is the object with a content key, the value is the actual question.
    
    <p className="answerOption">
    

        <input
            type="checkbox"
            className="radioCustomButton"
            name="radioGroup"
            value = {element.content}
            onChange={(event) => props.storeAnswers(event, props.question, index)}
            
        />
        {element.content}
        
    </p>
    
    
))}
</>
    );
}



Aucun commentaire:

Enregistrer un commentaire