Метод onClick () не работает должным образом?

Question

Я пытаюсь создать приложение с множественным выбором, которое подсчитывает количество правильных и неправильных ответов.

Все отображается хорошо, но приложение не работает должным образом:

1. Выбор пользователя не определяется как правильный или неправильный ответ.
2. Вопрос не меняетсяк следующему.

Похоже, что я ошибся в методе onClick(), пожалуйста, помогите решить эту проблему.

Заранее спасибо.

const questions = [
  {
   question: 'What is 8 X 2?',
   options: [5, 16, 12, 18],
   answer: 16 
  },
  {
   question: 'What is 18 / 3?',
   options: [6, 10, 7, 5],
   answer: 6 
  },
  {
   question: 'What is 3 X 2?',
   options: [5, 16, 6, 10],
   answer: 6 
  },
  {
   question: 'What is 5 X 0?',
   options: [0, 5, 10, 6],
   answer: 0 
  },
  {
   question: 'What is 11 X 11?',
   options: [121, 144, 112, 120],
   answer: 121 
  },
  {
   question: 'What is 12 X 6?',
   options: [68, 82, 72, 56],
   answer: 72 
  },
  {
   question: 'What is 89 X 2?',
   options: [186, 192, 178, 155],
   answer: 178 
  },
  {
   question: 'What is 56 / 2?',
   options: [18, 32, 26, 28],
   answer: 28 
  },
  {
   question: 'What is 8 X 3?',
   options: [32, 18, 24, 21],
   answer: 24 
  },
  {
   question: 'What is 9 X 8?',
   options: [81, 72, 64, 68],
   answer: 72 
  }
]

function Question(props){
  return (
    <div>
      <h2 className='question'>{props.question}</h2>
    </div>
  );
}

function Option(props){
  return (
    <div>
      <button className = 'option' type = 'button' onlick = {() => {props.onClick()} }>{props.option}</button>  
    </div>
  )
}

function Options(props){
  const options = props.options.map ((option) => <Option key = {option} option = {option} onClick = {() => {props.onClick(option)}} />);
  return (
    <div>
      {options}  
    </div>
  )
}

function AnswerResult(props){
  return (
    <div className = 'result'>
      <div className = 'countAnswers'>
        <span>Correct: {props.correctAnswers}</span>
      </div>
      <br/>
      <div className = 'countAnswers'>
        <span>Incorrect: {props.incorrectAnswers}</span>
      </div> 
    </div>
  )
}

class TriviaApp extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      questions: questions,
      correctAnswers: 0,
      incorrectAnswers: 0,
      questionNumber: 0
    };
    this.handleClick = this.handleClick.bind(this);
  }

  isGameFinished(){
    return !this.state.questions[this.state.questionNumber];
  }

  handleClick(selectedOption){
    const questionInfo = this.state.questions[this.state.questionNumber];

    if (!this.isGameFinished()) {
      let sumCorrect = 0;
      let sumIncorrect = 0;
      if (selectedOption === questionInfo.answer) {
        sumCorrect++;
      } else {
        sumIncorrect++;
      }
      this.setState((prevState, props) => {
        return {
          questionNumber: prevState.questionNumber + 1,
          correctAnswers: prevState.correctAnswers + sumCorrect,
          incorrectAnswers: prevState.incorrectAnswers + sumIncorrect
        }
      });
    }
  }

  render(){
    let questionInfo;
    const gameIsActive = !this.isGameFinished();
    if (gameIsActive) {
      questionInfo = this.state.questions[this.state.questionNumber];
    } else {
      questionInfo = this.state.questions[this.state.questions.length - 1];
    }
    return (
      <div>
        <div className = 'game'>
          <Question question = {questionInfo.question} />
          <Options options = {questionInfo.options} onClick = {this.handleClick} />
        </div>
        <AnswerResult correctAnswers = {this.state.correctAnswers} incorrectAnswers = {this.state.incorrectAnswers} />
        {!gameIsActive && <div><span>Game is finished!</span></div>}
      </div>  
    );
  }
}

ReactDOM.render(
    <TriviaApp />,
    document.getElementById('root')
)

Вот ссылка на мой код CodePen: CodePen

Answer 1

Это просто опечатка в onclick, должно быть с верблюдом onClick:

<button className = 'option' type = 'button' onClick = {() => {props.onClick()} }>{props.option}</button>