Quiz questions and answers are coming from an api. I would like the questions and answers to be unique. I am currently putting the api in a useEffect hook. The api gets called the first time.
My idea was to wipe out the questions setQuestions([]) and then use the dependency questions.length === 0 in useEffect
Basically I need boilerplate code to show how to call the API when the new game starts.
If I call it directly as a function, then it doubles the data being returned.
I realize this is vague - if I knew how to explain it, I'd probably be able to find the answer.
I think what I'm trying to do in react is call the api multiple times, and give the useEffect hook with the proper dependency so it will re-render the quiz with new questions and answers.
Here's some code:
useEffect(() => {
// load from API
fetchApi()
}, [])
and...
const gameStart = () => {
setEndGame(false)
setStartGame(true)
setCurrentQuestion(0)
setCorrectAnswers(0)
//fetchApi()
}
The api and the quiz work fine, but they keep recycling the same questions. If I call the API again, then I get new questions - but they add on to the current questions. I tried setting questions to [] to wipe out the questions but that's not working for some reason.
Thank you for your assistance.