Не удалось скомпилировать React

Я почти уверен, что у меня просто нет правильного синтаксиса, но, похоже, я не могу понять правильный синтаксис. Вот мой код (он находится внутри return(), и этот возврат находится внутри render(){} вместе с html.

<div className = "questions">
  Now let's add some questions... <br />
  {// This is where we loop through our questions to
  // add them to the DOM.
  this.state.questions.map(question => {
    return (
      <div>
        {question}
        {
          for (var i = 0; i < 4; i++) {
            answers.push(
              <input 
                type = "text"
                onChange = {this.handleChangeEvent}
                name = {uuid()}
              />
            );
          }
        }
      </div>
    );
  })
</div>

Я новичок в этом, поэтому любая помощь будет очень полезной, спасибо!

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
517
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы нажимаете на массив answers внутри вашего JSX, но никогда его не используете. Вместо этого вы можете нажать на массив перед оператором return, а затем использовать его в JSX.

this.state.questions.map(question => {
  const answers = [];

  for (var i = 0; i < 4; i++) {
    answers.push(
      <input type = "text" onChange = {this.handleChangeEvent} />
    );
  }

  return (
    <div>
      {question}
      {answers}
    </div>
  );
});

В качестве альтернативы вы можете использовать Array.from:

<div className = "questions">
  Now let's add some questions... <br />
  {this.state.questions.map(question => {
    return (
      <div>
        {question}
        {Array.from({ length: 4 }, () => (
          <input type = "text" onChange = {this.handleChangeEvent} />
        ))}
      </div>
    );
  })}
</div>

Другие вопросы по теме