While mapping array, i want to check other elements' classlist in the array. Want to stop manipulate classlist if any button clicked before. Here is the code and issue photo

const questionElements = questions.map((question) => {

    // ANSWERS ARRAY AND SHUFFLE
    let answers = [...question.incorrect_answers,question.correct_answer]
    shuffle(answers)

    // TOGGLE BUTTON BACKGROUND COLOR WHEN BTN CLICKED
    function toggleBtnBgColor(btn) {
        btn.target.classList.toggle("dark-bg-color")
    }

    return (
        <div key={nanoid()}>
            <div className="question" key={nanoid()}>{question.question}</div>
            {answers.map((answer)=> {
                return (
                    <button key={nanoid()} onClick={toggleBtnBgColor} className="answer-button">{answer}</button>
                )
            })}
            <hr></hr>
        </div>
    )
})

return (
    <div className="question-container">
        {questionElements}
    </div>
)

Photo

CodePudding user response：

Check please this codesandbox. It can be a little complicated for you but feel free to ask questions

We use useState as a store for keys and answers flags. When we update our store via setQuestions with each update we calculate answersDisabled and pass it through props in answer component.

Example isn't perfect but I hope it helps you

CodePudding user response：

I don't quite understand your issue. What you mean by stop manipulating classlist?