React - Use async function for rendering in JSX?

Question

How can I use a promise function inside the return of a component, like this:

function MyComp () {
 return (
  <div>
   {getFirebasePromise(ref).then(url => return url)}
  </div>
 )
}

So the result would be:

<div>urlFromFirebase</div>

Do I have to use a useState() even though I have several promises in the same component?

Answer 1

You can use useState and useEffect to do that.

function MyComp () {
    [url, setUrl] = useState("");
    useEffect(()=>{
        getFirebasePromise(ref).then(url => setUrl(url));
    });
    
    return (
        <div>
            {url}
        </div>
    )
}