I'm working on my first project and i get this error

I fetch an API and call the first object to render on the page, it worked perfectly then I call a second object without reloading the page it also works but when I reload the page I get an error that the second object I'm calling is undefined here's the code:

React.useEffect(() => {
    async function getQuiz() {
        const res = await 
        fetch("https://opentdb.com/api.php?amount=3&difficulty=easy&type=multiple")
        const data = await res.json()
        setQuiz(data.results)
         setQuizincorretanswer(data.results)}
    getQuiz()
  },[])

<QuizPage  
      questions = {quiz[0].question}
      answerone = {quizincorretanswer[0].incorrect_answers[1]}
/>

When I call the incorrect_answers alone without the [1] it works but when i choose i specific array inside it like this incorrect_answers[1] it crashes when reload

API link : https://opentdb.com/api.php?amount=3&difficulty=easy&type=multiple

I tried to create a state for every incorrect answer but didn't work either, tried also to many fetch methods but nothing worked.

CodePudding user response：

You are setting the setIncorrectanser state to the question property of the result instead of the incorrect_answers array inside the useEffect. See it in the yellow shaded area below enter image description here

CodePudding user response：

Hi please Do conditional rendering.check set value variable is not empty or null before you assign or render