[![

<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

CodePudding user response：

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