How to access multiple javascript objects?

Question

In my ReactJs I set the following state:

this.state = {
questionsAnswer: [
        { // first question
          question: 'A simple question: ',
          options: [ 'Answer1', 'Answer2', 'Answer3'],
          answer: 'Answer3',
        },
        { // second question
          question: 'Second Simple Question',
          options: ['Answer1', 'Answer2'],
          answer: 'Answer1'
        }]}

It's a quiz-like application which checks your answers. The problem I have is that I render an element based on the length of 'options'. Let that element be a div for the simplicity. When I render question 1, three divs are rendered; when in question 2, two divs are rendered.

The problem I have is that I can't dynamically access inside elements of the object state so I can render the number of DIVs. For example, we can do this.state.questionsAnswer[0].options.length to access the length of the first element and change index to get second element.

What is the best approach to render elements based on the length of options?

What I tried was that:

for (let i = 0; i < this.state
                              .questionsAnswer[0]
                              .options
                              .length; i++) { //// render div here }

Should I run another loop inside the questionsAnswer? Or Maybe a beforeEach?

Another thing I must mention is that I'm trying to access it after render(){//here }

Sounds like you want nested loops, one over questionsAnswers the other over options. Do not use .forEach. I recommend map or for … of. — Bergi
– Bergi, Commented Nov 7, 2018 at 22:15
Let me just say that you shouldn't put hardcoded data in state, ever. The word state implies that it changes, precisely what quiz questions and answers never do. Also, the answer field should contain the index of the options array that stores the correct answer. — user5734311
– user5734311, Commented Nov 7, 2018 at 22:15
Nested loops are one way, the other is to create a Question Component and pass options as prop, then use a second loop inside the Component's render() to render the options. — user5734311
– user5734311, Commented Nov 7, 2018 at 22:17

Eitan G · Accepted Answer · 2018-11-07 22:20:42Z

1

The problem I have is that I can't dynamically access inside elements of the object state so I can render the number of DIVs.

Yes you can! You can map through the questions and the map through the options, returning the div.

this.state.questionsAnswer.map(question => {
  return question.options.map(option => {
    <div>stuff</div>
  })
})

answered Nov 7, 2018 at 22:20

Eitan G

1464 bronze badges

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

Collectives™ on Stack Overflow

How to access multiple javascript objects?

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