I have a ponent that works and will return data from State as long as it isn't nested. However, if I need to dig a little deeper within the object, I get an error: "TypeError: Cannot read property 'name' of undefined".

I'm positive that there is a value for it (checked Inspector and the variable does indeed have a value, that's how I knew what to put in code). Why does it work for a higher value, but not the lower value?

class Concert extends Component {

constructor(props) {
    super(props);

    this.state = ({
        concert:''
    })
}
ponentDidMount(){
    var concertid = `${REQ_URL}/${this.props.match.params.concertid}`;
    fetch(concertid, {
        method: 'GET'
    })
    .then(response => response.json())
    .then(json => {
        this.setState({
            concert:json
        })
    })


}
render() {
    return (
        <div>
            <Header />
            <div className="concert">
                <div className="venue">

                //THIS IS THE PART THAT RETURNS ERROR
                //this.state.concert.id returns a correct value
                //POSITIVE this.state.concert.artist.name DOES CONTAIN VALUE

                Venue: {this.state.concert.artist.name}
                </div>

            </div>
        </div>
        )
}

}

I have a ponent that works and will return data from State as long as it isn't nested. However, if I need to dig a little deeper within the object, I get an error: "TypeError: Cannot read property 'name' of undefined".

I'm positive that there is a value for it (checked Inspector and the variable does indeed have a value, that's how I knew what to put in code). Why does it work for a higher value, but not the lower value?

class Concert extends Component {

constructor(props) {
    super(props);

    this.state = ({
        concert:''
    })
}
ponentDidMount(){
    var concertid = `${REQ_URL}/${this.props.match.params.concertid}`;
    fetch(concertid, {
        method: 'GET'
    })
    .then(response => response.json())
    .then(json => {
        this.setState({
            concert:json
        })
    })


}
render() {
    return (
        <div>
            <Header />
            <div className="concert">
                <div className="venue">

                //THIS IS THE PART THAT RETURNS ERROR
                //this.state.concert.id returns a correct value
                //POSITIVE this.state.concert.artist.name DOES CONTAIN VALUE

                Venue: {this.state.concert.artist.name}
                </div>

            </div>
        </div>
        )
}

}

• javascript
• reactjs

Share Improve this question Follow asked Sep 19, 2017 at 21:17 homersheinekenhomersheineken 33366 silver badges1515 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

When the ponent is rendered for the first time, the value of this.state.concert is '' (you set that value in the constructor) so if you are trying to access this.state.concert.artist.name you are actually trying to access undefined.name - and there is your error.

The value of this.state.concert is getting change only after the ponent was loaded - after the success callback of your fetch call is done, and only then that value will be available.

What you can do is check if you have a value before accessing it:

{this.state.concert && this.state.concert.artist &&
    <div>Venue: {this.state.concert.artist.name}</div>
}       

easy, api calls are asynchronous so this.state.concert.artist.name will be {"empty"} until you get the api response.

use this:

Venue: {this.state.concert && this.state.concert.artist && this.state.concert.artist.name}

The problem is it's trying to render before the data is there since the API call is asynchronous.

A nicer way to fix this is to extract the values using es6 object destructuring with defaults:

const {
  id,
  artist: {
    name
  } = {}
} = this.state.concert;

-

Venue: {name}

This way, if artist is not present you'll just get undefined instead of throwing an error

Also concert should be an object by default in the constructor:

this.state = {
    concert: {}
};