Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

103
Views
After Promise object not rendering

I have been trying to display map an array after resolving its promise. Unfortunately, it is not being rendered. Here is the code:

<View>
     {array.map((item) => {
        promiseFunction(item).then((res) => {
          return (
            <FunctionalComponent
             prop={res.prop}
            />
          );
        });
      })}
</View>
about 4 years ago · Juan Pablo Isaza
3 answers
Answer question

0

You can't do that directly as you are trying to since React will try to render an array of promises and when they have resolved it's too late the Component has already rendered. Previous answers showd you how to set to state the results once they come and render only after the promises are fulfilled. But with React@18 you could jump that step and render the promises almost directly. If you are using Suspense, there is a way to handle this kind of scenarios, because Suspended components are able to consume promises directly and to render a fallback until they resolve:

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>;
};

A demo that you can play with, HERE.

about 4 years ago · Juan Pablo Isaza Report

0

Array.prototype.map() won't wait for Promise to resolve, so data will never be rendered. You should try classic for ... of.

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> 
  )
}
about 4 years ago · Juan Pablo Isaza Report

0

You have to separate the async function from rendering. And you have to do the array.map properly. The list of FunctionalComponent props must be a state.

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>)
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!