Как мне изменить класс для элемента на который был клик

Question

У меня есть внешний элемент со списком вопросов и правильным ответом Как мне изменить клас именно для того элемента списка на который был клик?

        this.state = {
            answerState: false,
            quiz: [
                {
                    question: "Question 1",
                    rightAnswer: 4,
                    answers:[
                        {answer: 'A) 1', id: 1},
                        {answer: 'B) 2', id: 2},
                        {answer: 'C) 3', id: 3},
                        {answer: 'D) 4', id: 4}
                    ]
                }
            ]
        }
    }

    onAnswerClick=(rightAnswerId)=>{
        let activeQuestionRightAnswer = this.state.quiz[this.state.activeQuestion].rightAnswer;
        if(activeQuestionRightAnswer == rightAnswerId){
            this.setState({
                answerState: true
            })
          }else{
            this.setState({
                answerState: false
            })
        }
    }

    render() {
        return (
            <div className="quiz">
                <ActiveQuiz 
                    answers={this.state.quiz[this.state.activeQuestion].answers}
                    rightAnswer={this.state.quiz[this.state.activeQuestion].rightAnswer}
                    onAnswerClick={this.onAnswerClick}
                    answerState={this.state.answerState}
                />
                </div>
            </div>
        );
    }
}

Внутренний

            <ul className="quizanswer">
                         {this.props.answers.map((answer, index)=>{
                            return(
                                <li className={this.props.answerState == true ? "sucsess" : "error"} key={index} onClick={()=>this.props.onAnswerClick(answer.id, this.props.answerState)}>{answer.answer}</li>
                            )
                        })}
            </ul>

Answer 1

Я бы сделал как то так:

import React from "react";
import "./styles.css";
import ActiveQuiz from "./ActiveQuiz";

class App extends React.Component {
  state = {
    activeQuestion: 0,
    quiz: [
      {
        question: "Question 1",
        rightAnswer: 4,
        answers: [
          { answer: "A) 1", id: 1, answerState: null },
          { answer: "B) 2", id: 2, answerState: null },
          { answer: "C) 3", id: 3, answerState: null },
          { answer: "D) 4", id: 4, answerState: null }
        ]
      }
    ]
  };

  onAnswerClick = rightAnswerId => {
    let activeQuestionRightAnswer = this.state.quiz[this.state.activeQuestion]
      .rightAnswer;
    let newQuiz = this.state.quiz;
    newQuiz[this.state.activeQuestion].answers.forEach(answer => {
      if (
        answer.id === rightAnswerId &&
        answer.id === activeQuestionRightAnswer
      ) {
        answer.answerState = "sucsess";
      }
      if (
        answer.id === rightAnswerId &&
        answer.id !== activeQuestionRightAnswer
      ) {
        answer.answerState = "error";
      }
    });
    this.setState({
      quiz: newQuiz
    });
  };

  render() {
    return (
      <div className="quiz">
        <ActiveQuiz
          answers={this.state.quiz[0].answers}
          rightAnswer={this.state.quiz[this.state.activeQuestion].rightAnswer}
          onAnswerClick={this.onAnswerClick}
          answerState={this.state.answerState}
        />
      </div>
    );
  }
}

export default App;

И второй компонент:

import React from "react";

class ActiveQuiz extends React.Component {
  render() {
    return (
      <ul className="quizanswer">
        {this.props.answers.map((answer, index) => {
          return (
            <li
              className={answer.answerState}
              key={index}
              onClick={() =>
                this.props.onAnswerClick(answer.id, this.props.answerState)
              }
            >
              {answer.answer}
            </li>
          );
        })}
      </ul>
    );
  }
}

export default ActiveQuiz;

Вот пример чтоб покликать: https://codesandbox.io/s/zen-sun-399if

БЛОГ НА HUSL

Как мне изменить класс для элемента на который был клик

Ответы (1 шт):