React for Beginners Step 4 - Making an API Call + Render Method + componentDidMount Video

This code relates to Step 4 of the video here: https://youtu.be/bLFNFbnntgw

import React, { Component } from 'react';

//import Contacts from './components/contacts';

class App extends Component {

  state = {

    books: []

  }

  componentDidMount() {

    fetch('https://www.anapioficeandfire.com/api/books?pageSize=30')

      .then(res => res.json())

      .then((data) => {

        this.setState({ books: data })

      })

      .catch(console.log)

  }

  render() {

     var output

     var output2

  if (this.state.books == undefined || this.state.books.length == 0) {

    output = 'Hold on...data is loading'

        }

        else

        {

          output =this.state.books[0].name   

          output2 =' ISBN:' + this.state.books[0].isbn 

        }

    return (

      <div>

    <li> {output} </li>

    <li> {output2} </li>

      </div>

    );

  }

}

export default App;