I want to render an image, whose url I fetch from an API on app start. When I do this react crahses with following message: TypeError: Cannot read property 'icon' of undefined.
Whilst icon is a property within an object I can access everything else and even the object.

class Current extends React.Component {
  render() {
    console.log(this.props.current.condition);
    // Ok, first I write undefined to the console, but then the object
    console.log(this.props.current.condition.icon);
    // BAM. Doomsday.

    return (
      // Beneath me everything is totaly fine.
      <div className="Current">
        <div className="Important">
          <div>
            <img src={this} alt={this} />
            <span>{this.props.current.temp_c}</span>
          </div>
          <h1>{this.props.location.name}, {this.props.location.country}</h1>
          <p>{this.props.location.localtime}</p>
        </div>
        <h1>hey</h1>
      </div>
    );
  }
}

export default Current;

I tried juggeling the object with ComponentWillMount and ComponentDiDMount but it didn't help. How can I access the icon property without crashing the application?

Edit: Kind of fixed by this:

<img 
src={typeof(this.props.current.condition) === 'undefined' ? '' : this.props.current.condition.icon} 
alt={typeof(this.props.current.condition) === 'undefined' ? '' : this.props.current.condition.text} 
/>

...but this can't be clean code, right?

I want to render an image, whose url I fetch from an API on app start. When I do this react crahses with following message: TypeError: Cannot read property 'icon' of undefined.
Whilst icon is a property within an object I can access everything else and even the object.

class Current extends React.Component {
  render() {
    console.log(this.props.current.condition);
    // Ok, first I write undefined to the console, but then the object
    console.log(this.props.current.condition.icon);
    // BAM. Doomsday.

    return (
      // Beneath me everything is totaly fine.
      <div className="Current">
        <div className="Important">
          <div>
            <img src={this} alt={this} />
            <span>{this.props.current.temp_c}</span>
          </div>
          <h1>{this.props.location.name}, {this.props.location.country}</h1>
          <p>{this.props.location.localtime}</p>
        </div>
        <h1>hey</h1>
      </div>
    );
  }
}

export default Current;

I tried juggeling the object with ComponentWillMount and ComponentDiDMount but it didn't help. How can I access the icon property without crashing the application?

Edit: Kind of fixed by this:

<img 
src={typeof(this.props.current.condition) === 'undefined' ? '' : this.props.current.condition.icon} 
alt={typeof(this.props.current.condition) === 'undefined' ? '' : this.props.current.condition.text} 
/>

...but this can't be clean code, right?

• javascript
• reactjs
• undefined

3 Answers 3

class Current extends React.Component {
  render() {
    const { current } = this.props
    if ( !(current && current.condition) ) return <span>Loading</span>;

    return (
      // Beneath me everything is totaly fine.
      <div className="Current">
        <div className="Important">
          <div>
            <img src={this} alt={this} />
            <span>{this.props.current.temp_c}</span>
          </div>
          <h1>{this.props.location.name}, {this.props.location.country}</h1>
          <p>{this.props.location.localtime}</p>
        </div>
        <h1>hey</h1>
      </div>
    );
  }
}

export default Current;

try

src={this.props.current.condition && this.props.current.condition.icon}

The correct way to test if a variable is undefined is like this:

this.props.current.condition === undefined

There is no need to use typeof() because undefined is a valid value in JavaScript code.

You can simplify this in a condition because undefined is already considered "falsy". This means that you can use an undefined value directly in an if statement. In React, the mon idiom is like this:

this.props.current.condition && this.props.current.condition.icon

This will evaluate to undefined if this.props.current.condition is undefined. Otherwise, it will evaluate to the value of this.props.current.condition.icon.

For a deeper understanding, I suggest that you learn about "truthiness" and "falsiness" in JavaScript. I also suggest you learn about boolean operators and short-circuiting.