No puede hacer eso directamente como lo está intentando, ya que React intentará generar una serie de promesas y, cuando se hayan resuelto, es demasiado tarde, el Componente ya se ha procesado. Las respuestas anteriores le mostraron cómo configurar para indicar los resultados una vez que llegan y se procesan solo después de que se cumplen las promesas. Pero con React@18 podrías saltar ese paso y representar las promesas casi directamente. Si está utilizando Suspense, hay una manera de manejar este tipo de escenarios, porque los componentes suspendidos pueden consumir promesas directamente y generar una reserva hasta que se resuelvan:

 const arr = [1, 2, 3, 4, 5]; export default function App() { return ( <Suspense fallback={<p>Loading.....</p>}> <AsyncComponent /> </Suspense> ); } export const AsyncComponent = () => { // THIS IS AN ARRAY OF PROMISES const data = arr.map((el, i) => { const d = useGetData(`https://jsonplaceholder.typicode.com/todos/${i + 1}`); console.log(d); return ( <h5> {i + 1}:{d?.title} </h5> ); }); // HERE YOU RENDER THE PROMISES DIRECTLY return <div>{data}</div>; };

Una demo con la que puedes jugar, AQUÍ .

Array.prototype.map() no esperará a que se resuelva Promise, por lo que los datos nunca se procesarán. Deberías probar el clásico para... de.

 const Foo = ({}) => { const [components, setComponents] = useState([]) useEffect(() => { (async () => { for (const item of array) { setComponents([...conponents, <FunctionalComponent prop={(await promiseFunction(item)).prop}/>]) } })() } return ( <View> {components} </View> ) }

Debe separar la función asíncrona de la representación. Y tienes que hacer el array.map correctamente. La lista de props de FunctionalComponent debe ser un estado.

 const [propsArray, setPropsArray] = useState([]) useEffect(() => { // or any other function, that will feed data array.map(item => { promiseFunction(item).then(res => { setPropsArray(p => [...p, res]) } }, []) return (<View> {propsArray.map(c => (<FunctionalComponent prop={c.prop} />) } </View>)