React.js - Unable to access values inside array of objects

Question

I've been trying to access the values inside an array of objects but for some reason when I use console.log(quiz.questions[0].question) I get the error

TypeError: Cannot read property 'question' of undefined

code:

const quizAPI = process.env.REACT_APP_API_QUIZ;

const PlayQuiz = () => {
  const [quiz, setQuiz] = useState({
    title: '',
    questions: {},
  });
  useEffect(() => {
    async function getQuiz() {
      const param = window.location.search;
      const id = param.split('=');
      const Quiz = await axios.get(`${quizAPI}?_id=${id[1]}`);
      const { doc } = Quiz.data.data;
      console.log(doc[0]);
      const quizDoc = doc[0];
      setQuiz({ ...quiz, title: quizDoc.title, questions: quizDoc.questions });
    }
    getQuiz();
  }, []);
  console.log(quiz.questions[0].question);

what console.log(quiz) shows:

{title: "findme", questions: Array(3)}
questions: Array(3)
0: {_id: "5f5500caab44c4bd2b58b109", question: "sfdf", answerSelectionOne: "sdvsv", answerSelectionTwo: "asd", answerSelectionThree: "", …}
1: {_id: "5f5500cdab44c4bd2b58b10a", question: "sfdfddd", answerSelectionOne: "sdvsv", answerSelectionTwo: "asd", answerSelectionThree: "", …}
2: {_id: "5f5500cfab44c4bd2b58b10b", question: "sfdfdddv", answerSelectionOne: "sdvsv", answerSelectionTwo: "asd", answerSelectionThree: "", …}
length: 3
__proto__: Array(0)
title: "findme"
__proto__: Object

norbitrial · Accepted Answer · 2020-09-14 13:44:41Z

2

Usually this means you are trying to access a property on a possibly null or undefined variable.

Probably you need to change the initial useState first because questions is an array and not an object {} as the following:

const [quiz, setQuiz] = useState({
    title: '',
    questions: [],
});

Secondly quiz.questions can have length of 0. So with a simple check before like quiz.questions.length > 0 you can eliminate that issue.

Then you can use logging as:

console.log(quiz.questions.length > 0 ? quiz.questions[0].question : null);

answered Sep 14, 2020 at 13:44

norbitrial

15.2k10 gold badges39 silver badges66 bronze badges

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

1 Comment

Parmjit Gill Over a year ago

Yes checking the length makes sense. Thank you.

Boussadjra Brahim · Accepted Answer · 2020-09-14 13:46:15Z

1

In order to access the quiz field values correctly it is recommended to use another useEffect that watches the quiz state :

    useEffect(() => {
        
        if(quiz.questions.length){
           console.log(quiz.questions[0].question);
         }
        
    }, [quiz]);

answered Sep 14, 2020 at 13:46

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

2 Comments

Parmjit Gill Over a year ago

A second useEffect makes alot of sense and will help further on. Thank you,

Boussadjra Brahim Over a year ago

Yes it's useful to give your data some flow during the component life cycle

Axel Rothe · Accepted Answer · 2020-09-14 13:53:55Z

1

it seems like you are trying to use an object {} as an array []!

What Javascript is trying to do is access this:

{
 "0" : { // your data},
}

What it should look like:

[
 0 : { // your data},
]

What you want to change is :

const [quiz, setQuiz] = useState({
    title: '',
    questions: [], // make it an array
});

And possibly consider using .push() to push individual objects to an array

answered Sep 14, 2020 at 13:53

Axel Rothe

215 bronze badges

Collectives™ on Stack Overflow

React.js - Unable to access values inside array of objects

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related