Why is this fetch promise-loader not showing result

Question

In this Codesandbox

It's loading like 20 fetch promises into an array and then watching them resolving with a progressbar.

What I don't understand is why in the makeQueryablePromise the console.log('inside makeQueryablePromise ', value); return undefined but in the fetch it's not - console.log('inside fetch ', data)). makeQueryablePromise is having the same promise??

Here's a print screen showing log output:

Answer 1

In your code:

  const makeRequests = useCallback(function() {
    return Array.from(Array(promises)).map(() =>
      fetch(URL)
        .then(res => res.json())
        .then((data) => console.log('inside fetch ', data))
    );
  }, []);

The latest callback returns undefined, because console.log returns nothing, so you loose data.

To solve this, return data:

        .then((data) => {
          console.log("inside fetch ", data);
          return data;
        })