Untitled

import React, { Component } from 'react';

export default class App extends Component {

  constructor(props) {
    super(props);
    this.state = { shows: [], };
  }


  componentDidMount() {
    fetch('https://api.infinum.academy/api/shows')
      .then((data) => data.json())
      .then((response) => {
        let shows = response.data.map((show) => {
          return (
            <div key={show._id}>
              <h3>{show.title}</h3>
              <br />
              <h6>Description :</h6>
              <p>{this.showDetails(show._id)}</p>
              <h6>Episodes :</h6>
                {this.showEpisodes(show._id)}
            </div>
          )
        })
        this.setState({ shows: shows });
      })
  }

  showDetails(showId) {
    fetch(`https://api.infinum.academy/api/shows/${showId}`)
      .then((data) => data.json())
      .then((response) => {
        return (
          response.data.description
      )
      })
  }

  showEpisodes(showId) {
    fetch(`https://api.infinum.academy/api/shows/${showId}/episodes`)
    .then((data) => data.json())
    .then((response) => {
      return (
        <p>{response.data}</p>
      )
    })
}


  render() {
    console.log(this.state.shows);
    return (

      <div className="container">
        <h1 id='title'>
          TV shows!
      </h1>
        <div className='showsContainer'>
          {this.state.shows}
        </div>
      </div>


    );
  }
}