react async problem: data not displaying after async fetch

Question

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

btw i delete some code to just make code softer so do not be confused i am waiting for helps — Adonis
– Adonis, Commented Jul 23, 2022 at 12:14

Nicholas Tower · Accepted Answer · 2022-07-23 12:15:33Z

1

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);
  }

  //....
}

answered Jul 23, 2022 at 12:15

Nicholas Tower

87k10 gold badges115 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

react async problem: data not displaying after async fetch

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related