реагировать имя класса не выбирает встроенный стиль

Question

Я использую динамическое c содержимое в моем приложении реакции. Контент загружается нормально. Я пытаюсь изменить стиль тега абзаца на основе значения Dynami c. Стиль также изменяется при щелчке по метке абзаца. Когда я щелкаю абзац, текст меняется, но предыдущие выбранные стили остаются в силе и не изменяются со значением Dynami c. Код, который меняет стиль:

if(ans){
        return ans.map((a, index) => {
            return(
                <div className="options-container" key={index}>
                        <p onClick={this.handleOptionClick} className={a.IsChecked ? 'option-selected' : 'option'}>{a.Awnser}</p>
                </div>
            )} 
        );
    }

, стиль для этого

.options-container {
    display: inline-block;
    width: 30%;
}

.option {
    background-color: $blue;
    border-radius: $button-radius;
    color: $white;
    cursor: pointer;
    margin: $md auto;
    padding: $normal;
    transition: 0.3s linear all;
    text-align: center;
    width: 90%;
}

.option-selected {
    background-color: $green;
    border-radius: $button-radius;
    color: $white;
    cursor: pointer;
    margin: $md auto;
    padding: $normal;
    transition: 0.3s linear all;
    text-align: center;
    width: 90%;
}

Answer 1

вот что я сделал. Я думаю, что вы что-то упустили. пожалуйста, посмотрите, если вы найдете какую-то идею.

  handleOptionClick = () => {
    this.setState({ answer: "here is your new value", IsChecked: true });
  };
  render() {
    return (
      <div>
        <p
          onClick={this.handleOptionClick}
          className={this.state.IsChecked ? "option-selected" : "option"}
        >
          {this.state.answer}
        </p>
      </div>
    );
  }

Answer 2

Проблема, кажется, с a.IsChecked, остальная часть кода выглядит правильно. Убедитесь, что его значение обновляется в компоненте.