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>
        );
    }
}

ttt · Accepted Answer · 2021-01-30 02:24:38Z

2

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
))}

answered Jan 30, 2021 at 2:24

ttt

1,8091 gold badge13 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

User1990 Over a year ago

Thanks, that actually worked for me. I have an async /await on the query it's fetching so not sure why it would lag. Regardless thought it's working now. Thank you!

Dan Over a year ago

@User1990 React won't wait for the query to resolve before rendering the component just because the function itself is asynchronous. There will be some time between your component mounting and the server response completing where your component will be in an intermediate state of having no data but still being displayed. You need to account for that by adding a loading state of some kind.

Sajib saha · Accepted Answer · 2021-01-30 05:48:36Z

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...

trquoccuong · Accepted Answer · 2021-01-30 02:28:21Z

0

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

answered Jan 30, 2021 at 2:28

trquoccuong

2,8732 gold badges22 silver badges29 bronze badges

Collectives™ on Stack Overflow

map is not a function on array React

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related