Api call data update in React hook is not working, It's not updating the state

Question

[![

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import axios from "axios";
export const getPokemanData = async () => {
    let arr = [];
    const list = await axios.get('https://pokeapi.co/api/v2/pokemon/');
    const d = list.data.results;
    const data = d.map(async (item, index) => {
        arr[index] = {
            'name': item.name
        };
        const d = await axios.get((item.url));
        const q = d.data.abilities.map(item => item.ability.name);
        arr[index]['ability'] = q.join(",");
        return arr;
    });
    
    return arr;
}

]1]1

The snippet code which is added in image and this above code for API call. Api is working properly but the value getting update in UI is only for name not for Ability

score 1 · Accepted Answer · answered Nov 18 '22 at 12:04

1

As far as I know, async await is not working in map of array you can promisify your array by using Promise.all

here you can see what I say :

Use async await with Array.map

answered Nov 18 '22 at 12:04

Ali Sattarzadeh

3,220
1
6
20

I tried many approaches. But if you see the snippet code for UI in attached. In data I am getting only one value name but in console both value are coming. – Chandan Singh Nov 18 '22 at 12:10
I tried this approach it's working, Thanks :) – Chandan Singh Nov 18 '22 at 12:14

Api call data update in React hook is not working, It's not updating the state

1 Answers1