Перекраска кнопки. Javascript React
 

Всем привет. Я делаю квиз на реакте. Из json файла подтягиваю текст вопроса, варианты ответа и признак верности ответа. При нажатии выполняется функция handleAnswerOptionClick, которая принимает на параметр isCorrect и в зависимости от ответа увеличивает очки или ничего не делает. Хочу так же добавить чтобы в случае если isCorrect истина, то кнопка покрасится в зеленый, иначе в красный и небольшая пауза чтобы было видно перекраску перед переходом к следующему вопросу. Вот только я понятия не имею как это сделать корректно. Либо указать на конкретный стиль, либо прописать его в js. Скормил гуглу кучу формулировок но нигде не нашел нужного решения. Подскажите пожалуйста решение.

Quizz.jsx

import React, { useState } from "react"
import "./Quizz.css";

const Quizz = () => {
    const questions = require("./questions.json")

    const [currentQuestion, setCurrentQuestion] = useState(0)
    const [score, setScore] = useState(0)
    const [showScore, setShowScore] = useState(false)

    const handleAnswerOptionClick = (isCorrect) => {
        if (isCorrect) 
            setScore((score + 1))
            
        //     this.style.background = '#7bb970'
        //     this.style.color = '#green'
        // }

        // else {
        //     this.style.background = '#7bb970'
        //     this.style.color = 'ffffff'
        // }

        const nextQuestion = currentQuestion + 1

        if (nextQuestion < questions.length) setCurrentQuestion(nextQuestion)
        else setShowScore(true)
    }

    const refresh = () => {
        setCurrentQuestion(0)
        setScore(0)
        setShowScore(false)
    }

    return (
        <section className="test">
            <h2 className="test__heading">Проверь себя</h2>
            <p className="test__description">Пройди тест из 8 вопросов и узнай, <br /> почему планету необходимо спасать уже сейчас</p>
            <div className="quizz">
                {
                    showScore
                        ? <div className="section__score">
                            <div>Правильных ответов {score} из {questions.length}</div>
                            <button className="refresh_btn"
                                onClick={refresh}>Попробовать еще раз</button>
                        </div>
                        : <div className="question__section">
                            {/* <div className="question__count">
                      <span>Вопрос {currentQuestion + 1} </span> / {questions.length}
                  </div> */}
                            <div className="question__text">
                                {questions[currentQuestion].questionText}
                            </div>
                            <div className="answer__section">
                                {questions[currentQuestion].answerOptions.map(item => (
                                    <button className="button__quizz" onClick={() => handleAnswerOptionClick(item.isCorrect)}>
                                        {item.answerText}
                                    </button>
                                ))}
                            </div>
                        </div>
                }
            </div>
        </section>
    )
}
export default Quizz;

questions.json

[
    {
        "questionText": "Сколько литров пресной воды тратится на 100 мл кофе?",
        "answerOptions": [
            {
                "answerText": "Менее 30 л",
                "isCorrect": false
            },
            {
                "answerText": "50 л",
                "isCorrect": false
            },
            {
                "answerText": "130 л",
                "isCorrect": true
            }
        ]
    },
    {
        "questionText": "Повторное использование вещей сокращает эко-след на:",
        "answerOptions": [
            {
                "answerText": "70 %",
                "isCorrect": true
            },
            {
                "answerText": "50 л",
                "isCorrect": false
            },
            {
                "answerText": "10 л",
                "isCorrect": false
            }
        ]
    },
    {
        "questionText": "Сколько лет будет разлагается полиэтиленовый пакет?",
        "answerOptions": [
            {
                "answerText": "~ 50 лет",
                "isCorrect": false
            },
            {
                "answerText": "~ 100 - 200 лет",
                "isCorrect": true
            },
            {
                "answerText": "~ 500 лет",
                "isCorrect": false
            }
        ]
    },
    {
        "questionText": "Сколько нужно пластиковых бутылок, чтобы сделать 1 пару кроссовок?",
        "answerOptions": [
            {
                "answerText": "Более 150",
                "isCorrect": false
            },
            {
                "answerText": "Около 100",
                "isCorrect": false
            },
            {
                "answerText": "Около 20",
                "isCorrect": true
            }
        ]
    },
    {
        "questionText": "Переработка сокращает загрязнение воды на:",
        "answerOptions": [
            {
                "answerText": "20 %",
                "isCorrect": false
            },
            {
                "answerText": "50 %",
                "isCorrect": true
            },
            {
                "answerText": "80 %",
                "isCorrect": false
            }
        ]
    },
    {
        "questionText": "Сколько тонн нефти ежегодно попадает в океан?",
        "answerOptions": [
            {
                "answerText": "Менее 1 млн тонн",
                "isCorrect": false
            },
            {
                "answerText": "Менее 5 млн тонн",
                "isCorrect": false
            },
            {
                "answerText": "От 5 до 10 млн тонн",
                "isCorrect": true
            }
        ]
    },
    {
        "questionText": "Сколько лет будет разлагаться пластиковая зубная щетка?",
        "answerOptions": [
            {
                "answerText": "От 80 до 200 лет",
                "isCorrect": false
            },
            {
                "answerText": "До 500 лет",
                "isCorrect": false
            },
            {
                "answerText": "От 500 до 1000 лет",
                "isCorrect": true
            }
        ]
    },
    {
        "questionText": "Сколько кг мусора производит российская семья из 4 человек?",
        "answerOptions": [
            {
                "answerText": "Около 400 кг",
                "isCorrect": true
            },
            {
                "answerText": "Около 200 кг",
                "isCorrect": false
            },
            {
                "answerText": "Менее 100 кг",
                "isCorrect": false
            }
        ]
    }
]

Основная идея Реакта - работа от состояния.
Т.е. твои презентационные компоненты должны отрисовываться исходя из некоего состояния.
Т.о. тебе придется продумать то состояние, на основании которого, кнопка будет того или иного цвета... Ну и организовать смену этого состояния...