Aquí está mi código para el componente de la aplicación.

 import { nanoid } from "nanoid"; import { useEffect, useState } from "react"; import Quiz from "./Components/Quiz"; import axios from "axios"; export default function App() { const [quiz, setQuiz] = useState([]); useEffect(() => { const newQuiz = []; axios.get("https://opentdb.com/api.php?amount=5").then((data) => data.data.results.map((val) => newQuiz.push({ id: nanoid(), question: val.question, correctAns: val.correct_answer, options: [...val.incorrect_answers, val.correct_answer], }) ) ); setQuiz(newQuiz); }, []); console.log(quiz) const quizElements = quiz.map((val) => <Quiz key={val.id} value={val} />); return <div>{quizElements}</div>; }

console.log(cuestionario) // el cuestionario se imprime allí en la consola.

Aquí está el código para el componente Quiz.

 export default function Quiz(props) { return ( <div> <h3>{props.value.question}</h3> </div> ); }

Pero en html, está totalmente en blanco. ¿Cuál es el problema aquí?