CODEWITHSUNDEEP
javascriptreactjsaxios
4156
4156

Reputation: 400

Map is not defined

I keep getting this error that map is not defined. I changed my code around because of a regeneratorRuntime error and now I'm stuck with this one. Any help is appreciated!

import React, {Component, useEffect, useState} from 'react'
import axios from 'axios'
require("regenerator-runtime/runtime");

const App = () => {
    const [data, setData] = useState({heroes: []});
    useEffect(() => {
         const fetchData = async () => {
             const result = await axios(
                 'https://api.opendota.com/api/heroStats',
             );
             setData(result.data);
         };
        fetchData();
            }, []);
    return(
        <ul>
            {data.heroes.map(item => (
                <li key={item.id}>
                    <a href={item.name}>{item.localized_name}</a>
                </li>
            ))}
        </ul>
    )
};
export default App

Upvotes: 0

Views: 2463

Answers (5)

Shashidhar Reddy
Shashidhar Reddy

Reputation: 195

The .map function is only available on array.

Check what type "data" is being set to, and make sure that it is an array.

Here, the heros data is not set to "data" so you need to add to "Data"

you can do by using setData({...data, heroes:result.data});

this will work for you!

Upvotes: 0

Lasantha Basnayake
Lasantha Basnayake

Reputation: 379

{data.heroes && data.heroes.map(item => (...

Will this work?

Upvotes: 0

akhtarvahid
akhtarvahid

Reputation: 9769

Define like this

setData({...data, heroes:result.data});

because you have pass heroes array variable to state so spread variable then set data

       useEffect(() => {
         const fetchData = async () => {
             const result = await axios(
                 'https://api.opendota.com/api/heroStats',
             );
           setData({...data, heroes:result.data});
         };
        fetchData();
       }, []);

Upvotes: 1

linthertoss
linthertoss

Reputation: 164

it'll working: 

    import React, {Component, useEffect, useState} from 'react'

    import axios from 'axios'
    require("regenerator-runtime/runtime");

    const App = () => {
        const [data, setData] = useState({heroes: []});
        useEffect(() => {
             // Using an IIFE
             ( async () => {
                 const result = await axios(
                     'https://api.opendota.com/api/heroStats',
                 );
                 setData({...data, heroes: result.data || [] });
             })();
           }, []);
        return(
            <ul>
                {data.heroes.map(item => (
                    <li key={item.id}>
                        <a href={item.name}>{item.localized_name}</a>
                    </li>
                ))}
            </ul>
        )
    };
    export default App

Upvotes: 0

see sharper
see sharper

Reputation: 12025

The data returned from that API is just an array of objects. There is no key 'heroes'. So just do: data.map(item =>... and you should be good.

Upvotes: 0

Related Questions