I have a sidebar which sets a category Id on click and shows product information based on this Id.

In order to display each product's details, I make an api post call using axios in a useEffect() hook and setData with useState hook.

However, when I try to console.log the data, I get unreliable data back, that is, some undefined and some data.

import { useState, useEffect, useCallback, useMemo } from "react";
import axios from "axios";

import ProductCard from "../Product-cards/_medium-product-card";

const ProductDisplay = ({ subCategorySkus, categoryId, allSkus }) => {

  const [data, setData] = useState();
  const [isLoading, setIsLoading] = useState();

  const apiRequest = { product_skus: allSkus };

  const productData = useProductData(apiRequest);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.post("/products", apiRequest);

        setData(response.data);
        setIsLoading(false);
      } catch (err) {
        console.log(err.message);
      }
    };
    fetchData();
  }, [categoryId]);
  
  console.log(data);

  return isLoading ? (
    " data is loading ..."
  ) : (
    <div className="product-display">
      <h3>Child component Id: {categoryId}</h3>
      <ProductCard categoryId={categoryId} />
      
    </div>
  );
};

export default ProductDisplay;

You can see here what I get in the console: .

I have tried adding an if condition, but I am not sure that addresses the issue. I have tried with different dependencies in the useEffect. But I feel there is something I am not understanding.

The api is sending the information correctly, but I get several responses in the console.log and some of them come in as undefined.

This means that I can do a data.map because it crashes the component.

Any help?

UPDATE:
@moonwave99 provided the answer (see below). For the benefit of others who may browse through this question and to clarify what the solution entails, I am including an image below, showing where I changed my code. I think that most importantly, I had not initialised my useState() to an empty array, like this: useState([]).

Any further clarification of the issues here by anyone who knows more, is welcomed. As this is only a quick fix without enough context to understand the logic.