Posts

Showing posts from August, 2020

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 >   {

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 >