Resolving undefined Values from Promise.all() in React's useEffect Hook

Learn how to fix the issue of `Promise.all()` returning an array of undefined values in React's `useEffect` hook when fetching data.
---
This video is based on the question stackoverflow.com/q/67223446/ asked by the user 'E.K.Garcia' ( stackoverflow.com/u/15678330/ ) and on the answer stackoverflow.com/a/67223471/ provided by the user 'CertainPerformance' ( stackoverflow.com/u/9515207/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Promise.all() inside useEffect in react returns an array of undefined items

Also, Content (except music) licensed under CC BY-SA meta.stackexchange.com/help/licensing
The original Question post is licensed under the 'CC BY-SA 4.0' ( creativecommons.org/licenses/by-sa/4.0/ ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( creativecommons.org/licenses/by-sa/4.0/ ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Understanding the Problem: Why is Promise.all() Returning Undefined?

As a React developer, you might find yourself using the Promise.all() method within the useEffect hook to fetch data from an API. However, it's not uncommon to encounter an issue where the returned array contains undefined values after the fetch is complete. This can be frustrating, especially when you're trying to display that data in your component. Let's explore this problem in-depth and provide a solution to ensure that you get the correct data returned from your API calls.

The Setup: A Quick Overview of the Code

Consider the following code snippet where you're trying to fetch drink data based on an array of IDs:

[[See Video to Reveal this Text or Code Snippet]]

As seen in the code above, you map over an array of IDs, performing a fetch request for each ID, then using Promise.all to handle the array of promises.

Dissecting the Issue: Why Are Values Undefined?

The problem arises from how the Promises in the drinksPromises array are set up. Here is the crux of the issue:

When you call .then(data => console.log(data)), this logs the expected data to the console. However, the important point is that console.log() does not return any value; therefore, the promise resolves to undefined. As a result, Promise.all() receives an array full of undefined values.

An Incorrectly Handled Promise

The crucial error is that within the .map() function, you're not returning the Promise that results from the fetch call. Instead, you're executing console.log() which doesn’t contribute the needed value back to the array being constructed.

Crafting the Solution: Returning the Promise

To ensure that each promise resolves to the actual fetched data, you should return the promise generated by the fetch call directly within the .map() function. Here's how to fix your code:

Updated Code:

[[See Video to Reveal this Text or Code Snippet]]

Breakdown of Changes:

Return the Promise: In the updated code, fetch() returns its promise directly from the mapping function. The .then(res => res.json()) extracts the data, ensuring that the promise resolves to the desired data instead of undefined.

Direct Data Use: Now, when Promise.all(drinksPromises) is executed, it will receive an array of resolved values—your drink data—rather than an array of undefined values.

Conclusion: Getting Your Data to Display

By ensuring that you return the promise correctly in the .map() function, you can avoid the pitfall of getting undefined values in your drinkCard state. This approach will enable you to readily access the desired data from your API and display it effectively in your React application.

Now, you can confidently handle similar situations in the future! If you have any more questions, feel free to ask, and happy coding!