En mi aplicación de prueba, una pregunta tiene dos respuestas. Actualmente, al hacer clic en las respuestas, no cambia de color y no se puede seleccionar. Cuando se hace clic en la respuesta, debe cambiar de color y se puede seleccionar de la lista como un botón de opción. cuando ambas opciones están seleccionadas (coloreadas) debemos enviar.
{questions[currentQuestion].answerOptions.map((answerOption) => ( <button className="button" onClick={() => handleAnswerOptionClick(answerOption.isCorrect)} > {answerOption.answerText} </button> ))}Hay una gran cantidad de refactorización que necesita hacer aquí:
Use la regla general: si escribe el código exacto más de 3 veces, debería considerar usarlo con un iterador como "for"
Pero para responder a su pregunta sobre cómo cambiar el css de la respuesta correcta:
<button className={"button " + (answerOption.isCorrect ? 'correctClass' : '')} onClick={() => handleAnswerOptionClick(answerOption.isCorrect)} >sección css-
.correctClass{ background-color: lightblue; }Agregué una condición en el nombre de la clase que aplica una nueva clase cuando la respuesta es correcta.