how to output value from async method

Question

I want to create a async method that returns an image path like this:

const renderMasterThumb = async (masterAssetId) => {
    const masterAsset = await getAssetByIdAsync(masterAssetId);
    const path = masterAsset.path;
    return path;
  };

then I call the method like this:

<img
    src={`images/${(async () => {
    await getAssetByIdAsync(collection.masterAssetId);
    })()}`}
    alt="master thumb"
/>

However instead of the image path I get a Promise object:

<img src="images/[object Promise]" alt="master thumb">

Does someone know how I can output the value (eg 'bart.jpg') from calling an async method?

thanks for your help,

Anthony

Answer 1

Your anonymous async function in your JSX still returns a promise, just like the one you're calling. You need to fundamentally restructure your React components. Either:

1. The component where this is being done has to be able to render when it doesn't have the result from getAssetByIdAsync yet (perhaps some "loading" placeholder), or

2. That component shouldn't be rendered at all until that result is available, which means doing the call to getAssetByIdAsync in the parent component instead of this one.

You need to do that in order to allow time for the asynchronous operation to complete. Within whatever component is doing it, you would use .then and .catch on the call to getAssetByIdAsync in order to handle the fulfillment or rejection of the promise it returns.