La forma de 'Reaccionar', y también la forma correcta de hacer lo que está buscando, es la siguiente:

1. Inicializa un estado de resultado vacío.
2. Devuelve una tabla en blanco en el primer renderizado.
3. Obtenga los datos dentro de un gancho useEffect() .
4. Actualice el estado cuando finalice la consulta.
5. Renderice los datos utilizando el estado de resultado.

Si no está familiarizado con el gancho useEffect (o los ganchos en general), eche un vistazo a los documentos de React para useEffect .

Un componente que hace esto se vería así:

 import { useState, useEffect } from "react"; function Stocks() { const [account, setAccount] = useState([ { Symbol: 'AAPL', Shares: 1, TotalCost: 130, }, { Symbol: 'TSLA', Shares: 1, TotalCost: 1500, }, ]); const [results, setResults] = useState([]); useEffect(() => { const fetchedResults = []; account.map(({Symbol, Shares, TotalCost}) => { fetch("https://finnhub.io/api/v1/quote?symbol=" + Symbol + "&token=12345678910") .then((res) => res.json()) .then((data) => fetchedResults.push({ Symbol, Shares, TotalCost, Content: data.c })); }); setResults(fetchedResults); }, []) return ( <table> <tbody> {results.map(({Symbol, Shares, TotalCost, Content}) => ( <tr> <td>{Symbol}</td> <td>{Shares}</td> <td>${TotalCost}</td> <td>{Content}</td> </tr> )) </tbody> </table> ) }

Explicación:

• useEffect() : cuando se llama con el argumento de dependencia de [] (matriz vacía), la devolución de llamada dentro del enlace se llama una vez y solo después de que el componente se haya procesado, que es cuando deberían ocurrir efectos secundarios como solicitudes HTTP.
• resultados : results se almacenan en el estado en el que queremos que el componente se vuelva a representar cuando se hayan obtenido los resultados, que es para lo que es el estado.