I have an issue to render questions from an API, I created the state and used useEffect to call the API, but when I want to render it, it destroys all my css to render a blank page, I've tried to move the component to the App but the problem remains.
Here is my App :
import React from 'react'
import './App.css'
import FirstPage from './components/firstPage'
import Quiz_page from './components/quiz'
function App() {
const [start, setStart]= React.useState(true)
const [game, setGame]= React.useState(false)
function startGame(){
setGame(true)
setStart(false)
}
return (
<div>
<bloc className='bloc'></bloc>
<bloc className='bloc2'></bloc>
{start && <FirstPage startGame={startGame}/>}
{game && <Quiz_page/>}
</div>
)
}
export default App
Here is the concerned component :
import React from 'react';
function Quiz(props){
const [quizData, setQuizData] = React.useState({});
React.useEffect(() => {
fetch('https://opentdb.com/api.php?amount=10&category=9&difficulty=medium&type=multiple')
.then(res => res.json())
.then(data => setQuizData(data))
console.log(data)
}, []);
const displayQuestions = quizData.map((element)=>{<Questions key ={element.question}question={element.question}/>})
return(
<div className='questions'>
{displayQuestions}
</div>
)
}
export default Quiz
Here are the console errors:
react-dom.development.js:12056 Uncaught TypeError: quizData.map is not a function
at Quiz (quiz.jsx:15:39)
at renderWithHooks (react-dom.development.js:16305:18)
at mountIndeterminateComponent (react-dom.development.js:20074:13)
at beginWork (react-dom.development.js:21587:16)
at beginWork$1 (react-dom.development.js:27426:14)
at performUnitOfWork (react-dom.development.js:26557:12)
at workLoopSync (react-dom.development.js:26466:5)
at renderRootSync (react-dom.development.js:26434:7)
at recoverFromConcurrentError (react-dom.development.js:25850:20)
at performSyncWorkOnRoot (react-dom.development.js:26096:20)
Quiz @ quiz.jsx:15
renderWithHooks @ react-dom.development.js:16305
mountIndeterminateComponent @ react-dom.development.js:20074
beginWork @ react-dom.development.js:21587
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
recoverFromConcurrentError @ react-dom.development.js:25850
performSyncWorkOnRoot @ react-dom.development.js:26096
flushSyncCallbacks @ react-dom.development.js:12042
(anonymous) @ react-dom.development.js:25651
Just to precise, the blocs on the App are here to make pure CSS and they are disappearing too when the const displayQuestions is created and not even rendered.
That map that's stored in displayQuestions is not returning a value for each iteration. You should either have a return before <Questions... or use parentheses, like so:
const displayQuestions = quizData.map((element) => (
<Questions key={element.question} question={element.question} />
));
Also, change your state to this as you want an array to map over:
const [quizData, setQuizData] = React.useState([]);
Finally our API is returning an object with results key holding that actual array you want, so you should have:
React.useEffect(() => {
fetch(
"https://opentdb.com/api.php?amount=10&category=9&difficulty=medium&type=multiple"
)
.then((res) => res.json())
.then((data) => setQuizData(data.results));
}, []);