map is not a function on array React

Question

I'm getting an error that map is not a function on my data. I'm getting a response back from an api that is returning an array of objects. When I don't refresh the page I can view the results displayed just fine and even navigate to view them individually (when I click on see more). However, when I refresh the page I get the error of "Map is not a function" on my props even though the results are displaying in the console log.

I'm lost here and can't figure out why it's doing that.

componentDidMount() {
        this.props.getCanyons();
    }

render() {
        const { canyons } = this.props;
        console.log(canyons)
        return (
            <section>
                
                {canyons.map(canyon => (
                    <section key={canyon.canyon_id}>
                        <h3>{canyon.canyon_name}</h3>
                        <img src={canyon.canyon_pic} alt={canyon.canyon_name} />
                        <Link key={canyon.canyon_id} to={`/canyon/${canyon.canyon_id}`}>
                            <button>See More</button>
                        </Link>
                    </section>
                ))}
            </section>
        );
    }
}

Answer 1

componentDidMount() {
        this.props.getCanyons();
    }

render() {
        const { canyons } = this.props;
        console.log(canyons)
        return (
            <section>
                
                {   canyons !== '' || canyons.length > 0 ? //change here
                    canyons.map(canyon => (
                    <section key={canyon.canyon_id}>
                        <h3>{canyon.canyon_name}</h3>
                        <img src={canyon.canyon_pic} alt={canyon.canyon_name} />
                        <Link key={canyon.canyon_id} to={`/canyon/${canyon.canyon_id}`}>
                            <button>See More</button>
                        </Link>
                    </section>
                ))
                :
                null
                }
            </section>
        );
    }
}

Please follow the change. It should works for you...

Answer 2

Many browsers provide a live view when using console.log(). When the request not finished 'canyons' is undefined. Use

 console.log(JSON.parse(JSON.stringify(obj)))

For this problem, try to set default value or check variable first

Answer 3

When the api failed or having lag time to get response, it may be undefined. This kind of checking prevent you to from such problem.

return (  
    {canyons && canyons.map(canyon => (
     ...skipped code
    ))}
)

Typescript provide feature of adding a ? before try to access the related Object type variable

//In typescript
{canyons?.map(canyon => (
     ...skipped code
))}