using a JSX react variable after completion of a Promise-CodePudding

Here is the code:

import React from 'react';
import { Link } from 'react-router-dom';

import Main from '../layouts/Main';

import Cell from '../components/Stats/nCell';
import init from '../data/stats';

const promiseHandle = async () => {
  Window.data = await init();
};

promiseHandle();

const Stats = () => (
  <Main
    title="Stats"
    description="Some statistics about Ahammad Shawki and ahammadshawki8.github.io"
  >
    <article className="post" id="stats">
      <header>
        <div className="title">
          <h2 data-testid="heading"><Link to="/stats">Publications</Link></h2>
        </div>
      </header>
      <p className="rec-p"> Please accept my sincere apologies for the inconvenience.
        At the moment, I am working on my Publication API for this website
        so may not be able to find all of my articles here.
        But the great news is that you can always read all of my articles on <a href="https://ahammadshawki8.hashnode.dev/">HashNode</a>.
      </p>
    </article>
    {Window.data.map((post) => (
      <Cell
        data={post}
        key={post.title}
      />
    ))}
  </Main>
);

export default Stats;

Since I am working with a promise, here Window.data has been declared async way. But in the react JSX {}, the code is sync. So, it runs before the completion of the promise which causes the bug. I want to run it after the promise. How to solve this? Thanks in advance.

CodePudding user response：

You need to either move the call inside the component and use useEffect and useState or do a poll inside the component.

const Stats = () => {
 const [data, setData] = useState([])

 useEffect( () => {
  const promiseHandle = async () => {
    setData(await init());
  };
  promiseHandle();
 }, [])