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;

Comments

Post a Comment

Popular posts from this blog

Logitech USB Unifying Receiver

-
Image
A bit of helpful tip before you buy a Logitech keyboard or mouse. Logitech basically have two types of connections for connecting keyboards and mouse.  Some of their devices are compatible with something called the "Unifying Receiver" this means that you can connect two devices such as keyboard and mouse to one USB receiver.  Other devices do not connect to a unifying receiver and instead connect to something called a nano received. The nano receiver is unique per device so will not connect to another keyboard or mouse from logitech other than the one it came with. So the most popular MK270 combo that Logitech have is not compatible with a unifying receiver so if you damage your receiver, you cannot go out and buy a new receiver for your keyboard or mouse. And vice-versa if you damage your mouse from the combo set of MK270, you cannot just buy a replacement mouse that can connect to same receiver. You will have to buy a new receiver too for your mouse unless one comes with it
Read more

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 >
Read more