file2

import React, { Component } from "react";

class Movie extends Component {
  constructor() {
    super();
    this.state = {
      pictures: [],
      error: null,
      loading: false
    };
  }

  componentDidMount() {
    this.setState({ loading: true });
    fetch("http://www.omdbapi.com/?i=tt3896198&apikey=3fe2ee61")
      .then(results => results.json())
      .then(res => {
        console.log(res);
        this.setState({ pictures: res.data, loading: false });
      })
      .catch(err => {
        console.log(err);
        this.setState({ error: err.data, loading: false });
      });
  }

  render() {
    const { pictures, error, loading } = this.state;
    return (
      <div>
        {loading ? (
          <p>Loading...</p>
        ) : (
          <div className="container2">
            <div className="container1">
              {pictures ? (
                pictures.map((pic, index) => {
                  return (
                    <div key={index}>
                      <img alt="unable to load" src={pic.Poster} />
                    </div>
                  );
                })
              ) : (
                <div>{error && "Error loading picture"}</div>
              )}
            </div>
          </div>
        )}
      </div>
    );
  }
}

export default Movie;