How to disable other buttons onclick for a short period of time-CodePudding

i have simple quizz project where i fetch data of questions and answers my problem is when i click on one of the answers i want other buttons to be disabled because if someone keeps pressing on other options the quiz will rapidly change questions. i want to disable other answer options when i clik on the answer and then after the next question generates enable them again and so on


import './App.css';
import axios from 'axios'
import {useState,useEffect} from 'react'

function App() {
  const [quiz,setQuiz] = useState([])
  const [answer,setAnswer] = useState([])
  const [correct,setCorrect] =useState('')
  const [points,setPoints] = useState(0)
  const [turns,setTurns] = useState(0)
  const [disabled,setDisabled] = useState(false)

  function refreshPage() {
    window.location.reload(false);
  }

  useEffect(()=>{
    axios.get('https://opentdb.com/api.php?amount=10')
    .then(res =>{
       setQuiz(res.data.results[0])
       let tempVar = res.data.results[0] ;
       setAnswer([...tempVar.incorrect_answers,tempVar.correct_answer].sort(()=>Math.random() - 0.5))
      setCorrect(tempVar.correct_answer)
      console.log(res.data)
      console.log(answer)
       
    
    })
    .catch(err=>{
      console.log(err);
    })
  },[])

  const  handleClick = (e) =>{
    setDisabled(true)
    if(disabled && e.target.innerText === correct){
     
      setPoints(points   1)
      setTurns(turns   1)
      e.target.style.background = 'green'
      setTimeout(() => e.target.style.background = '', 2000);  
   
      setTimeout(() => {
        axios.get('https://opentdb.com/api.php?amount=10')
        .then(res=>{
           setQuiz(res.data.results[0])
           let tempVar = res.data.results[0] ;
           setAnswer([...tempVar.incorrect_answers,tempVar.correct_answer].sort(()=>Math.random() - 0.5))
          setCorrect(tempVar.correct_answer)
      })
      .catch(err=>{
        console.log(err);
      })
    }, 2000);
    console.log(points)
    } else if(e.target.innerText !== correct){
      setTurns(turns   1)
      e.target.style.background = 'red'
     setTimeout(() => e.target.style.background='', 2000);

      setTimeout(() => {
        axios.get('https://opentdb.com/api.php?amount=10')
        .then(res=>{
           setQuiz(res.data.results[0])
           let tempVar = res.data.results[0] ;
           setAnswer([...tempVar.incorrect_answers,tempVar.correct_answer].sort(()=>Math.random() - 0.5))
          setCorrect(tempVar.correct_answer)
      })
      .catch(err=>{
        console.log(err);
      })
    }, 2000);
    } 
    }
    
if(points >= 10|| turns >= 10){
  return (
    <div className='score'>
      <h1>Well done !</h1>
     <p>Your Score: {points}</p>
      <button className='button-28' onClick={refreshPage}>New Test</button>
    </div>
  )
}

  return (
    <div className="App">
     <div className='grid'>
   <h1>{quiz.question}</h1>
   { answer?.map(answers =>
   <button className='button-28' onClick={handleClick}key={answers}>{answers}</button>
   )
   }

    </div>
    </div>

  );
}

export default App;

CodePudding user response：

try like this:

const [loading, setLoading] = useState(false)

const getDate = async () => {
   setLoading(true)
   const data = await axios.get('/teste')
   ...
   setLoading(false)
}

<button disabled={loading}>Teste</button>

CodePudding user response：

You can update your disabled state after you update your answers and correct. And use that state as disabled = true/false in your buttons

import './App.css';
import axios from 'axios'
import {useState,useEffect} from 'react'

function App() {
  const [quiz,setQuiz] = useState([])
  const [answer,setAnswer] = useState([])
  const [correct,setCorrect] =useState('')
  const [points,setPoints] = useState(0)
  const [turns,setTurns] = useState(0)
  const [disabled,setDisabled] = useState(false)

  function refreshPage() {
    window.location.reload(false);
  }

  useEffect(()=>{
    axios.get('https://opentdb.com/api.php?amount=10')
    .then(res =>{
       setQuiz(res.data.results[0])
       let tempVar = res.data.results[0] ;
       setAnswer([...tempVar.incorrect_answers,tempVar.correct_answer].sort(()=>Math.random() - 0.5))
      setCorrect(tempVar.correct_answer)
      console.log(res.data)
      console.log(answer)
       
    
    })
    .catch(err=>{
      console.log(err);
    })
  },[])

  const  handleClick = (e) =>{
    setDisabled(true)
    if(disabled && e.target.innerText === correct){
     
      setPoints(points   1)
      setTurns(turns   1)
      e.target.style.background = 'green'
      setTimeout(() => e.target.style.background = '', 2000);  
   
      setTimeout(() => {
        axios.get('https://opentdb.com/api.php?amount=10')
        .then(res=>{
           setQuiz(res.data.results[0])
           let tempVar = res.data.results[0] ;
           setAnswer([...tempVar.incorrect_answers,tempVar.correct_answer].sort(()=>Math.random() - 0.5))
          setCorrect(tempVar.correct_answer)
          setDisabled(false)
      })
      .catch(err=>{
        console.log(err);
        setDisabled(false)
      })
    }, 2000);
    console.log(points)
    } else if(e.target.innerText !== correct){
      setTurns(turns   1)
      e.target.style.background = 'red'
     setTimeout(() => e.target.style.background='', 2000);

      setTimeout(() => {
        axios.get('https://opentdb.com/api.php?amount=10')
        .then(res=>{
           setQuiz(res.data.results[0])
           let tempVar = res.data.results[0] ;
           setAnswer([...tempVar.incorrect_answers,tempVar.correct_answer].sort(()=>Math.random() - 0.5))
          setCorrect(tempVar.correct_answer)
          setDisabled(false)
      })
      .catch(err=>{
        console.log(err);
        setDisabled(false)
      })
    }, 2000);
    } 
    }
    
if(points >= 10|| turns >= 10){
  return (
    <div className='score'>
      <h1>Well done !</h1>
     <p>Your Score: {points}</p>
      <button className='button-28' onClick={refreshPage}>New Test</button>
    </div>
  )
}

  return (
    <div className="App">
     <div className='grid'>
   <h1>{quiz.question}</h1>
   { answer?.map(answers =>
   <button className='button-28' onClick={handleClick}key={answers} disabled={disabled}>{answers}</button>
   )
   }

    </div>
    </div>

  );
}

export default App;