How can I express variables with array in JSX?

Question

I am a beginner learning ReactJs. I am trying to express data from firebase.

when I put {quizes[0].quiz} this was working. But, if I want to use 'qno' variable, what should I do?

import {useParams} from "react-router-dom";
import {dbService} from 'fbase';

const QuizPlay = () => {
    const {cateId} = useParams();
    const [qno, setQno] = useState(0);
    const [quizes, setQuizes] = useState([]);

useEffect(() => {
            dbService
            .collection("quizes")
            .where('cateId','==',cateId)
            .orderBy("createdAt", "desc")
            .onSnapshot((snapshot) => {
                const quizArray = snapshot.docs.map((doc) => ({
                    id: doc.id,
                    ...doc.data(),
                }));
                setQuizes(quizArray);
            })
        }, [cateId]);

return (
        <div className="container">
            {quizes[qno].quiz} <=== error
        </div>
 )

}

export default QuizPlay;

Daniel Storey · Accepted Answer · 2022-04-11 19:12:52Z

1

Before quizes has been populated quizes[qno] - (quizes[0]) - is undefined and therefore does not have a quiz property.

Try

<div className="container">
    {quizes[qno]?.quiz}
</div>

assuming your compiler supports optional chaining, or if not:

<div className="container">
    {quizes.length > 0 && quizes[qno].quiz}
</div>

answered Apr 11, 2022 at 19:12

Daniel Storey

9716 silver badges9 bronze badges

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

3 Comments

Shin Kim Over a year ago

Wow {quizes[qno]?.quiz} is working!!!!

Shin Kim Over a year ago

Thank you so much. {quizes[qno]?.quiz} <---- how does it work? What ? mean? I appreciate it anyway.

Daniel Storey Over a year ago

Optional chaining as documented here. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Obsidianlab · Accepted Answer · 2022-04-11 19:04:43Z

0

I think it's happening because when the component is mounted the first time the quizzes haven't been loaded yet. So quizes is empty. Try this:

{quizes && quizes[qno].quiz}

Or

{quizes.length > 0 && quizes[qno].quiz}

Could you tell us exactly what error your getting?

answered Apr 11, 2022 at 19:04

Obsidianlab

6971 gold badge6 silver badges24 bronze badges

1 Comment

Shin Kim Over a year ago

It says too many re-renders. I think I should not combine useState constant.

Collectives™ on Stack Overflow

How can I express variables with array in JSX?

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related