Не получается сделать квиз на React - компонент с ответами

Question

Делаю квиз на React, и немного запутался. Все решения, которые я нашёл в интернете, не соответствуют моей задаче: во всех квизах юзер просто переходит на следующий вопрос. А мне нужно организовать показ промежуточного результата. При клике на кнопку сама кнопка должна выделяться цветом (если ответ правильный - то зеленый цвет, если неправильный, то красный). Одновременно должна выделиться кнопка с правильным ответом, если ответ был неправильный.

Код компонента с ответами:

const quizList = [
    {
        question: 'Здесь вопрос',
        answers: {
            A: 'Ответ 1',
            B: 'Ответ 2',
            C: 'Ответ 3',
            D: 'Ответ 4'
        },
        right: 'B',
    },
   
]

function QuizQuestion(props) {

const [current, setCurrent] = useState(0);
const [disable, setDisable] = useState(false);

function answered(e) {
    console.log(e);
    setDisable(true);
}

return (
    <div className={style.QuizQuestion}>
        <p className={style.head}>Вопрос {current + 1}</p>
        <p>{quizList[current].question}</p>
        <button onClick={answered} disabled={disable}>
            A: {quizList[current].answers.A}
        </button>
        <button onClick={answered} disabled={disable}>
            B: {quizList[current].answers.B}
        </button>
        <button onClick={answered} disabled={disable}>
            C: {quizList[current].answers.C}
        </button>
        <button onClick={answered} disabled={disable}>
            D: {quizList[current].answers.D}
        </button>
    </div>
)
}

Как мне указать React, какую именно кнопку выделять? Пробовал отрисовывать кнопки с помощью map - это не работает.

Answer 1

написал на скорою руку но по идее должно сработать (это или что то в этом духе)

const [disable, setDisable] = useState({a:false,b:false, c:false});

    <button data='a' onClick={answered} disabled={disable.a}>
        A: {quizList[current].answers.A}
    </button>
    <button data='b' onClick={answered} disabled={disable.b}>
        B: {quizList[current].answers.B}
    </button>

function answered(e) {
    console.log(e);
    setDisable((prev) => {...prev, e.target.dataset.data: !prev[e.target.dataset.data]});
}

Answer 2

Привет что то типа этого, сам настроишь под свои нужды https://stackblitz.com/edit/react-sjyky5?file=src%2FApp.js

const quizList = [
  {
    question: 'Здесь вопрос',
    answers: {
      A: 'Ответ 1',
      B: 'Ответ 2',
      C: 'Ответ 3',
      D: 'Ответ 4'
    },
    right: 'B'
  }
];
export default function App() {
  const renderQuestions = quizList.map((quiz, id) => {
    return <QuizQuestion key={id} {...quiz} />;
  });
  return <div>{renderQuestions}</div>;
}

const QuizQuestion = ({ question, answers, right }) => {
  const [clicked, setClicked] = useState(false);
  
  const renderAnswers = () => {
    const ansversList = [];
    for (let answer in answers) {
      ansversList.push(
        <ChkBox
          key={answer}
          variant={answer}
          label={answers[answer]}
          right={right}
          clicked={clicked}
          setClicked={setClicked}
        />
      );
    }
    return ansversList;
  };
  return (
    <div>
      <h1>{question}</h1>
      {renderAnswers()}
    </div>
  );
};

const ChkBox = ({ variant, label, right, clicked, setClicked }) => {
  const [color, setColor] = useState('');

  const classColor = clicked ? (variant === right ? 'green' : 'red') : '';

  const onClick = () => {    
    setClicked(true);
  };

  return (
    <label className={classColor}>
      <h3>{label}</h3>
      <input
        type="checkbox"
        onClick={onClick}
        disabled={clicked}
      />
    </label>
  );
};

БЛОГ НА HUSL

Не получается сделать квиз на React - компонент с ответами

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