Getting error with ES6 `array.find`: ReactJS

Question

I have the following code, which is returning the error:

"cannot read property 'albumCover' of undefined

Based on the code at line 24.

import React, {Component} from 'react';
import albumData from './../data/albums';

class Album extends Component {
    constructor(props) {
        super(props);

        const album = albumData.find( album => {
            return album.slug === this.props.match.params.slug
        });

        this.state = {
            album: album
        };
    }

    render() {
        return (
            <section className ="album">
                <section id="album-info">
                    <img id="album-cover-art" src={this.state.album.albumCover} /> <- error
                    <div className="album-details">
                        <h1 id="album-title"></h1>
                        <h2 className="artist"></h2>
                        <div id="release-info"></div>
                    </div>
                </section>
          </section>
        );
    }
}

export default Album

My understanding is that this is due to a problem with the context of 'this' not being set correctly, but as far as I can see, this code should execute correctly. Can anyone tell my why I'm getting the error, and how to set the right context for 'this'?

Did you log your album in render to be sure that this.state.album is set ? — ChrisR
– ChrisR, Commented Feb 5, 2018 at 10:59
I suppose this will help you stackoverflow.com/questions/45468837/… or perhaps this stackoverflow.com/questions/47221853/… — Shubham Khatri
– Shubham Khatri, Commented Feb 5, 2018 at 11:04
after render before return try to console.log(this.state) and verify the state — Rajat Dhoot
– Rajat Dhoot, Commented Feb 5, 2018 at 11:05

Mayank Shukla · Accepted Answer · 2018-02-05 11:27:27Z

If you see how #array.find works, it will return undefined if all the elements fails the condition, otherwise return that single element.

As per MDN DOC:

The find() method returns the value of the first element in the array that satisfies the provided testing function. Otherwise undefined is returned.

Check this snippet (find will return undefined):

let a = [1,2,3,4,5].find(el => el>5);

console.log('a = ', a);   // will be undefined

That's why you are getting the error, when you are trying to access the property of undefined:

cannot read property 'albumCover' of undefined.

Solution:

Use Short circuit evaluation concept and put || {}, if find returns undefined, it will assign the {} blank object to album value.

Like this:

this.state = {
     album: album || {},
};

And use it like this:

src={this.state.album.albumCover || ''}

Or use album || {src: ''}:

this.state = {
    album: album || {src: ''}
}

mu_sa · Accepted Answer · 2018-02-05 11:04:07Z

0

One of the fix for this problem could be

 <img id="album-cover-art" alt="some-default-image" src={this.state.album ? this.state.album.albumCover : ''} /> <- error

answered Feb 5, 2018 at 11:04

mu_sa

2,74510 gold badges42 silver badges58 bronze badges

1 Comment

Shubham Khatri Over a year ago

I don't think will will quite solve the OP problem, it will remove the error for sure

Tim B James · Accepted Answer · 2018-02-05 12:18:12Z

0

Your props area being passed in here as a parameter, so rather than trying to access via this.props, just access the parameter directly.

constructor(props) {
    super(props);

    const album = albumData.find( album => {
        return album.slug === props.match.params.slug
    });

    this.state = {
        album: album
    };
}

Also then you will want to check to see if you then have an album set in the state properly before trying to read from it.

answered Feb 5, 2018 at 12:18

Tim B James

20.4k4 gold badges77 silver badges108 bronze badges

Collectives™ on Stack Overflow

Getting error with ES6 `array.find`: ReactJS

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related