Загрузить внешний JSON в React

Так что я новичок в этом. Я хочу загрузить внешний файл json в React, а затем использовать его.

Проблема, по-видимому, в том, что json еще не загружен, поэтому я получаю ошибки. Как Cannot read property 'map' of undefined и т. д. console.info дает:

1
3
Uncaught TypeError: Cannot read property 'map' of undefined

Итак, я читал, что это связано с асинхронными вещами. Но я не могу найти ни одного примера, как это исправить. Или как заставить его работать.

Я был бы очень признателен за такой небольшой пример, чтобы он работал.

Позже я хочу сделать возможным фильтрацию json с помощью <input type=text etc> с каким-то динамическим поиском. Но обо всем по порядку. Так может кто-нибудь мне помочь?

Это мой простой файл:

import React, { Component } from 'react';
import './App.css';

class App extends Component {

  constructor(){
    super();
    this.state = {
      data: []
    };
    console.info('1');
  };

  componentDidMount() {
    fetch("http://asite.com/file.json")
    .then( (response) => {
      return response.json() })
    .then( (json) => {
      this.setState({data: json});
      console.info('2');
    })
  };

  render() {
    console.info("3");
    return(
      <div className = "Employee">
      {
        this.state.data.employees.map(function(employee) {
          return (
            <div>
            <h1> {employee.name} </h1>
            </div>
          )
        })
      }
      </div>
    )
  }
}

export default App;