React - рендеринг сложных данных json

# Новый ответ

This should help you. Beware that I'm learning React too. https://stackblitz.com/edit/react-ytp2wh

# Предыдущий ответ

Вы можете получить данные с помощью метода fetch ().

Документы MDN:

Базовый запрос на выборку действительно прост в настройке. Взгляните на следующий код:

fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.info(JSON.stringify(myJson));
  });

Здесь мы получаем файл JSON по сети и выводим его на консоль.

Затем вместо использования цикла for попробуйте карта() для отображения данных в JSX.

Образец:

 render() {
    return (  
      <div>
        { 
          movies.map((movie) => (          
            <div 
                key = {movie.id} 
                title = {movie.title} 
                description = {movie.description}
                preview = {movie.preview}
            />                      
          ))                    
        }  
      </div>
    )
  }

См. Также Цикл внутри React JSX

Вот примерное решение того, чего вы пытаетесь достичь: Форма React JSON