import React, { Component } from 'react'
import axios from 'axios';

class Ghibli extends Component {
  state = {
    title: [],
    description: []
  }
  componentDidMount() {
    axios.get(`https://ghibliapi.herokuapp.com/films`)
      .then(response => {
        console.log(response.data[0].title);
        console.log(response.data[0].description);
        const title = response.data[0].title.map((object) => object.data);
      })
  }
  render() {
    return (
      <div>
        <h1>Api call to Studio Ghibli</h1>
          {this.state.title.map(titles =>
            <li key={titles.title}>
              {titles.title}
            </li>
          )}
      </div>
    );
  }
}

export default Ghibli;