hi i am trying to learn react and stuck with this error error message
could you guys help me my code:
import { useState, useContext } from "react";
import { GameStateContext } from "../helpers/Context"
import { db } from '../../firebase-config'
import { collection, getDocs } from "firebase/firestore";
import { useEffect } from "react";
const Quiz = () => {
const { score, setScore, gameState, setGameState, selection, setSelection } = useContext(GameStateContext);
const [isLoading, setLoading] = useState(true);
const questions = [];
useEffect(() => {
deneme();
}, []);
const deneme = async () => {
const querySnapshot = await getDocs(collection(db, selection));
querySnapshot.forEach((doc) => {
questions.push(doc.data());
});
setLoading(false);
}
if (isLoading) {
return <div> Loading</div>
}
return (
<div className="Quiz">
<h1>{questions[currentQuestion].question}</h1>
<div className="questions">
<button
onClick={() => {
chooseOption("optionA");
}}
>
{questions[currentQuestion]?.optionA}
</button>
<button
onClick={() => {
chooseOption("optionB");
}}
>
{questions[currentQuestion]?.optionB}
</button>
<button
onClick={() => {
chooseOption("optionC");
}}
>
{questions[currentQuestion]?.optionC}
</button>
<button
onClick={() => {
chooseOption("optionD");
}}
>
{questions[currentQuestion]?.optionD}
</button>
</div>
{currentQuestion == questions.length - 1 ? (
<button onClick={finishQuiz} id="nextQuestion">
Finish Quiz
</button>
) : (
<button onClick={nextQuestion} id="nextQuestion">
Next Question
</button>
)}
</div>
)
}
inside of deneme function i can access my data but i can not access it below whenever i use "?" error is not showing up but also buttons are not showing up too please help me
example :used ? at: questions[currentQuestion].question
CodePudding user response:
const questions = [];
Putting the data into a local variable named questions
is not going to help you. Every render will create a new local variable, and it will be an empty array.
If you want the data to be available on the next render, you need to put it into state:
const Quiz = () => {
const { score, setScore, gameState, setGameState, selection, setSelection } = useContext(GameStateContext);
const [isLoading, setLoading] = useState(true);
const [questions, setquestions] = useState([]);
useEffect(() => {
deneme();
}, []);
const deneme = async () => {
const querySnapshot = await getDocs(collection(db, selection));
const newQuestions = querySnapshot.docs.map(doc => doc.data());
setQuestions(newQuestions);
setLoading(false);
}
//....
}