Cannot read property 'map' of undefined with react hooks

Question

Im trying to use fortnite api to display current item shop and i'm getting error likein the title, when I console log result it show an array but i cant map through it ? whY?

import React, { useState, useEffect } from 'react'
import axios from 'axios';
export default function itemShop() {
    const [shop, setShop] = useState('')
    const API = 'https://fortnite-public-api.theapinetwork.com/prod09/store/get?language={en}'
    useEffect(() => {
        const fetchData = async () => {
            const result = await axios(
                API,
            );

            setShop(result.data);
        };
        fetchData();
    }, []);

    const { items } = shop;
    console.log(items)
    return (
        <div>
            <p>{shop.date}</p>
            {items.map(item => <p>{item.name}</p>)}
        </div>
    )
}

code sandbox : https://codesandbox.io/embed/km10wq4y5

jsdeveloper · Accepted Answer · 2019-04-13 15:27:51Z

17

You need to check items isn't null/undefined before rendering:

{items && items.map(item => (
        <p>{item.name}</p>
      ))}

Working: https://codesandbox.io/s/24vkqzn6xy

answered Apr 13, 2019 at 15:27

jsdeveloper

4,0751 gold badge18 silver badges15 bronze badges

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

Comments

Mayank Shukla · Accepted Answer · 2019-04-13 15:37:03Z

5

Problem is in this line:

const [shop, setShop] = useState('')

Since you are expecting shop.items as an array, so define the initial state as:

const [shop, setShop] = useState({ items: [] });

Also assign unique key to each p, here:

<p key={item.itemid}>{item.name}</p>

Working Code.

edited Apr 13, 2019 at 15:37

answered Apr 13, 2019 at 15:28

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

Comments

Lomefin · Accepted Answer · 2020-07-12 02:29:33Z

4

You can also do it like this

{ items?.map(item => (<p>{ item.name }</p>)) }

edited Jul 12, 2020 at 2:29

Lomefin

1,26115 silver badges45 bronze badges

answered Jul 12, 2020 at 0:20

quadri adedayo

412 bronze badges

Comments

Mejan · Accepted Answer · 2020-05-31 13:14:40Z

1

For me I forget to add await in axios after calling async method. like the code below. Make sure to check your code again if above methods didn't help you.

async function getCategories() {
      try {
        const response = axios.get("API");
        setCategories(response.data);
      } catch (error) {
        console.log("error", error);
      }
    }

answered May 31, 2020 at 13:14

Mejan

1,28616 silver badges18 bronze badges

Comments

Belaid BOUAOUALTEN · Accepted Answer · 2021-07-02 11:04:58Z

0

if anyone wants to understand this problem and its solution can visit the site web it was really helpful for me https://www.debuggr.io/react-map-of-undefined/

answered Jul 2, 2021 at 11:04

Belaid BOUAOUALTEN

3913 silver badges16 bronze badges

Collectives™ on Stack Overflow

Cannot read property 'map' of undefined with react hooks

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related