Как получить доступ к нескольким объектам JavaScript?

Question

В моих ReactJ я установил следующее состояние:

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'
        }]}

Это приложение, похожее на викторину, которое проверяет ваши ответы. Проблема, которую я имею, состоит в том, что я отрисовываю элемент на основе длины 'options'. Пусть этот элемент будет div для простоты. Когда я задаю вопрос 1, отображаются три элемента div; когда в вопросе 2, два div отображаются.

Проблема, с которой я столкнулся, заключается в том, что я не могу динамически получать доступ к элементам состояния объекта, поэтому могу отобразить количество DIV. Например, мы можем сделать this.state.questionsAnswer [0] .options.length, чтобы получить доступ к длине первого элемента и изменить индекс, чтобы получить второй элемент.

Каков наилучший подход к визуализации элементов на основе длины параметров?

То, что я пробовал, было:

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

Должен ли я запустить еще один цикл внутри вопросов? Или, может быть, до каждого?

Еще одна вещь, которую я должен упомянуть, это то, что я пытаюсь получить к ней доступ после render () {// здесь}

Answer 1

Проблема, с которой я столкнулся, заключается в том, что я не могу динамически получить доступ к элементам состояния объекта, поэтому могу отобразить количество DIV.

Да, вы можете! Вы можете отобразить через вопросы и карту через параметры, возвращая div.

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