How to use map function before fetch info React js

Question

Im doing a home page with this structure

const Login: React.FC = () => {

  [ ... ]

  return (
    <IonPage>


      <IonContent>

          <IonSlides pager={false} options={slideOpts}>
            {
              responseProducts.content.products.map(function(item,i) {
                return <IonSlide key={i} >
                        <IonCard onClick={Product}>
                          <IonImg src={item.urlImg}></IonImg>
                          <IonCardHeader>
                            <IonCardSubtitle>{item.ref}</IonCardSubtitle>
                            <IonCardTitle>{item.title}</IonCardTitle>
                          </IonCardHeader>
                        </IonCard>
                      </IonSlide>
              })
            }
          </IonSlides>

      </IonContent>
    </IonPage>
  );
};

The variable responseProducts.content.products is an array of products when i fetch a server api.

Im trying to fetch api to initialize the variable before the app starts :

const Login: React.FC = () => {
  /* this is the initialization of my variable with products*/
  let responseProducts : getProductsReponse;
  /* function to fetch the api*/
  useIonViewDidEnter(async () => {
    await fetchProducts();
  });


  const fetchProducts = async() =>{
    await ProductService.getProducts()
      .then((products ) =>{
         responseProducts = products.data;
      })
  }

  return (
    <IonPage>

      <IonContent>

          <IonSlides pager={false} options={slideOpts}>
            {
              responseProducts.content.products.map(function(item,i) {
                return <IonSlide key={i} >
                        <IonCard onClick={Product}>
                          <IonImg src={item.urlImg}></IonImg>
                          <IonCardHeader>
                            <IonCardSubtitle>{item.ref}</IonCardSubtitle>
                            <IonCardTitle>{item.title}</IonCardTitle>
                          </IonCardHeader>
                        </IonCard>
                      </IonSlide>
              })
            }
          </IonSlides>

      </IonContent>
    </IonPage>
  );
};

But im getting this error with my vaiable with products :

Variable 'responseProducts' is used before being assigned

Answer 1

[Edit] : To display a different content while waiting for your data you could do something like that:

if (!responseProducts) return <Loader />;
  else
    return (
      <IonPage>
        ...
      </IonPage>
    );

But here you need to trigger the render of your component. Either put your products in a state and use setState, or handle the fetching in your parent and pass your products as propr (Still need a state).

---

You need a default value for your responseProducts. You could use a useEffect hook and a useState hook to achieve this :

const Login: React.FC = () => {
  const [products, setProducts] = useState({});
  const [didMount, setDidMount] = useState(false);

  useEffect(() => {
    if(!didMount){
      // I don't know where this comes from so i'll use it like this, adapt if needed
      useIonViewDidEnter(async () => {
        await fetchProducts();
      });
    } else {
      !didMount && setDidMount(true);
    }
  });

  /* this is the initialization of my variable with products*/
  let responseProducts: getProductsReponse;
  /* function to fetch the api*/


  const fetchProducts = async () => {
    await ProductService.getProducts().then((products) => {
      // responseProducts = products.data;
      const data: getProductsReponse = products.data;
      setProducts(data);
    });
  };

  // You could even put a different return (a loader for exemple) while your data arent available
  return (
    <IonPage>
      <IonContent>
        <IonSlides pager={false} options={slideOpts}>
          {/* this is now strange, you can adapt what you put in your state */}
          {products.content.products.map((item, i) => {
            return (
              <IonSlide key={i}>
                <IonCard onClick={Product}>
                  <IonImg src={item.urlImg}></IonImg>
                  <IonCardHeader>
                    <IonCardSubtitle>{item.ref}</IonCardSubtitle>
                    <IonCardTitle>{item.title}</IonCardTitle>
                  </IonCardHeader>
                </IonCard>
              </IonSlide>
            );
          })}
        </IonSlides>
      </IonContent>
    </IonPage>
  );
};