Quizz Game React js

App.js

import React from 'react';
import './App.css';
class App extends React.Component{
  constructor(props)
  {
    super(props);
    //tableau d'objet représente les données du quizz
    this.quizz=[
      {
        question:'1+1=?',
        choix1:'2',
        choix2:'4',
        ChoixCorrect:1
      },
      {
        question:'Capital du Maroc?',
        choix1:'Casabalnca',
        choix2:'Rabat',
        ChoixCorrect:2
      },
      {
        question:'5*8=?',
        choix1:'40',
        choix2:'45',
        ChoixCorrect:1
      }
     
    ]
    this.state={
      points:0,
      indexQuestionActuelle:0,
      disableAvant:"",
      disableSuivant:"",
      ChoixCorrect:this.quizz[0].ChoixCorrect,
       bloquer:""  
       }
   
  }
 
  //Afficher la question suivante
  suivant=()=>{
    if(this.state.indexQuestionActuelle<this.quizz.length-1)
    {
    this.setState({
      indexQuestionActuelle:this.state.indexQuestionActuelle+1,
      ChoixCorrect:this.quizz[this.state.indexQuestionActuelle+1].ChoixCorrect,
      bloquer:""
    })

    //activer le bouton avant car on peut revenir à la dernière quetion
    this.setState(
      {
        disableAvant:""
      }
    )

  }
  else
  {
    this.setState(
      {
        disableSuivant:"disabled"
      }
    )
  }
}

//Afficher la question précédente
avant=()=>{
  if(this.state.indexQuestionActuelle>0){
    this.setState({
      indexQuestionActuelle:this.state.indexQuestionActuelle-1,
      ChoixCorrect:this.quizz[this.state.indexQuestionActuelle-1].ChoixCorrect,
      bloquer:""

    })

    //activer le bouton suivant car on a peut avancer
    this.setState(
      {
        disableSuivant:""
      }
    )
  }
  else
  {
    this.setState(
      {
        disableAvant:"disabled"
      }
    )
  }
}

//vérifier la réponse de l'utilisateur
verifier=(e)=>{
  //choix=le choix de l'utilisateur
  let choix=e.target.name;
  switch(choix)
  {
    case 'choix1':
      //ChoixCorrect:le numéro du choix correcte 1 ou 2
       if(this.state.ChoixCorrect==1)
       {
        this.setState(
          {
            points:this.state.points+5,
            bloquer:"disabled"
          }
        )
       }
       else
       {
        this.setState(
          {
            points:this.state.points-5,
            bloquer:"disabled"
          }
        )
       }
      break;

      case 'choix2':
         if(this.state.ChoixCorrect==2)
         {
          this.setState(
            {
              points:this.state.points+5,
              bloquer:"disabled"

            }
          )
         }
         else
         {
          this.setState(
            {
              points:this.state.points-5,
              bloquer:"disabled"

            }
          )
         }
      break;

  }
}
  render()
  {
    return (
      <div>
     
      <fieldset>
      <legend>Quizz Game</legend>
      <h1 style={{background:'#eee'}}><center>{this.quizz[this.state.indexQuestionActuelle].question}</center></h1>
      <table>
      <tr>
      <td><button name="choix1" disabled={this.state.bloquer} class="width100" onClick={this.verifier} >{this.quizz[this.state.indexQuestionActuelle].choix1}</button></td>
      <td><button name="choix2"  disabled={this.state.bloquer} class="width100" onClick={this.verifier}>{this.quizz[this.state.indexQuestionActuelle].choix2}</button></td>
      </tr>
      </table>
      <h1 style={{background:'#45ff12'}}><center>Points:<b>{this.state.points}</b></center></h1>
      <table>
      <tr>
      <td><button disabled={this.state.disableAvant} onClick={this.avant} class="width100">&lt;</button></td>
      <td><button disabled={this.state.disableSuivant} onClick={this.suivant} class="width100">&gt;</button></td>
      </tr>
      </table>
      </fieldset>
      </div>
     
      );
     
    }
   
  }
  export default App;