React for Beginners Step 5 - Displaying API JSON Array Data within Render Method

This code is for the following video: https://youtu.be/_b9L38nJRws

    

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>

       {this.state.books.map((book, index) =>  (<p key={index}> {book.name}  ISBN is  {book.isbn}</p>)  )

       }

 

      </div>

    );

  }

}

export default App;