Сохранение состояния кнопки, на которую нажали

Question

Не знаю, как это сделать, но я пытаюсь сохранить состояние кнопки, по которой щелкают, по умолчанию отсутствует className, если только он не был нажат

В основном у меня есть этот компонент

// This component renders buttons from an array inside of an object
<Question
          data={questions.find(q => q.id === currentQuestionId)}
          className={isActive ? 'active' : ''}
          handleClick={this.selectAnswer}
        />

data={questions.find(q => q.id === currentQuestionId)} // Based on current question Id, render out 
// buttons for specific questionId

при нажатии кнопки компонент повторно отобразит новый набор вопросов и перейдет к следующему набору вопросов, также следует применить стиль «активный»

selectAnswer = answer => {
    this.setState(state => ({
      currentQuestionId: state.currentQuestionId + 1,
      userAnswers: state.userAnswers.concat([answer]),
      isActive: !state.isActive,
    }))
  }

У меня также естьпредыдущая кнопка, которая отображается только в том случае, если ваш 'currentQuestionId' больше 1 (не отображает предыдущую кнопку в первом вопросе)

{currentQuestionId > 1 && (
          <button type="button" onClick={this.previousQuestion}>
            Previous
          </button>
        )}

previousQuestion = () => {
    this.setState(state => ({
      currentQuestionId: state.currentQuestionId - 1,
    }))
  }

В основном, когда срабатывает previosQuestion, я хочу видеть, какиекнопка была нажата с моим 'активным' className..Право теперь я думаю, что проблема в том, что когда запускается previousQuestion, он возвращает isActive обратно в false, так как весь компонент повторно рендерит

Вот схема макетався заявка

class Survey extends Component {
  constructor(props) {
    super(props)
    this.state = {
      currentQuestionId: 1,
      userAnswers: [],
      isActive: false,
    }
    this.selectAnswer = this.selectAnswer.bind(this)
  }

  selectAnswer = answer => {
    this.setState(state => ({
      currentQuestionId: state.currentQuestionId + 1,
      userAnswers: state.userAnswers.concat([answer]),
      isActive: !state.isActive,
    }))
  }

  previousQuestion = () => {
    this.setState(state => ({
      currentQuestionId: state.currentQuestionId - 1,
    }))
  }

  render() {
    const { currentQuestionId, userAnswers, isActive } = this.state
    const { questions } = this.props
    return (
      <SurveyContainer>
        <Question
          data={questions.find(q => q.id === currentQuestionId)}
          className={isActive ? 'active' : ''}
          handleClick={this.selectAnswer}
        />
        {currentQuestionId > 1 && (
          <button type="button" onClick={this.previousQuestion}>
            Previous
          </button>
        )}

        {console.log('answers', userAnswers)}
        {console.log('questionId', currentQuestionId)}
      </SurveyContainer>
    )
  }
}