Estoy tratando de hacer una aplicación de prueba usando React (usando API).

Enlace API: - ( https://opentdb.com/api.php?amount=10&category=9&difficulty=easy&type=multiple )

Pero recibo un error en la consola que dice lo siguiente: ingrese la descripción de la imagen aquí

Este es mi código:

 import React from 'react'; import './App.css'; function App() { const [answer,setAnswer]= React.useState([]) React.useEffect(()=>{ fetch("https://opentdb.com/api.php?amount=10&category=9&difficulty=easy&type=multiple") .then((res)=> res.json()) .then(data => setAnswer(data.results[3])) }, []) return ( <div className="App"> <h1>{answer.question}</h1> <h2>{answer.incorrect_answers[0]}</h2> <h2>{answer.correct_answer}</h2> </div> ); } export default App;

El error está en la línea 24:1 que es:

 <h2>{answer.incorrect_answers[0]}</h2>

Cuando estoy usando sin el índice, no hay ningún error, en cambio, se imprime toda la matriz de respuestas incorrectas, pero en el momento en que ingreso el índice y actualizo, aparece el error.

Pero si no actualizo y simplemente guardo el archivo en mi VS Code, se actualizará automáticamente en mi navegador. En el momento en que actualizo, aparece el error.

Amablemente ayúdenme en esto, estoy golpeado aquí desde hace mucho tiempo.

PD: No sugiera el método Async, Await.