TypeError: Cannot read property 'state name in much object' of undefined in React

Question

So I tried a bunch of object for some state stuff, lets say this was in this.state:

this.state = {
 musicinmedia: {
  isDetected: false,
  metadata: {
   songname: '',
   artistname: '',
   albumname: '',
  }
 }
}

and this in render:

{this.state.musicinmedia.metadata.songname}

and gave me an error of: TypeError: Cannot read property 'songname' of undefined

Answer 1

Your state might not be initialized, so you need to handle a null/undefined value until it is. You could do something like this to make sure state exists.

{this.state && this.state.musicinmedia.metadata.songname}