I can't fill a request response using axios in state variable in React.js with Next.js

Question

I'm working with React.js and I have the following problem:

import axios from "axios";

export default function Home() {

    const [products, setProducts] = useState([]);
    
    const ax = axios.create({ headers: { Accept: 'application/json' }});

    function test() {
        const res = ax.get("https://vtexstore.codeby.com.br/api/catalog_system/pub/products/search").then((response) => {
            // expected the setProducts to be filled with the return of this request
            setProducts(response.data);
        });
    }

    test();
    
    // and when I get here to see if the products have been filled, I get an empty array [ ]

    console.log(products);
    
    /* 
        as the products variable was not filled within the axios promise by setProducts, 
        there is no way to throw the products array here in the HTML to make a forEach or
        a map to look cute together with the tags 
    */
    
    return (
        <sup>how sad, with the product array empty, I can't put the data here '-'</sup>
    );
    
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>

See how the result comes out in the IDE console:

I'm in Visual Studio not knowing what to do, I'm new to ReactJS with NextJS and from an early age I've been trying to see if I could solve this problem, but without success.

What can I do to bring the products to the HTML page?

---

UPDATE: As per the solution below, I created a possible workaround that indicates a path that could have returned a solution

ax.get("https://vtexstore.codeby.com.br/api/catalog_system/pub/products/search/", {})
.then((response) => setProducts(response.data))
.catch((error) => {
    console.log(error); // AxiosError {message: 'Network Error', name: 'AxiosError', ...}
    console.log(error.status); // undefined
    console.log(error.code); // ERR_NETWORK
});

useEffect(() => {
    console.log(products);
}, []);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.0.2/umd/react-dom.production.min.js"></script>

and I'm getting the same error that I put in the comments of the first answer below:

but when I change the setProducts by the console.log to see if it returns the same result, this appears in the terminal where my next.js application is running

that:

ax.get("https://vtexstore.codeby.com.br/api/catalog_system/pub/products/search/", {})
.then((response) => console.log(response.data.length)) // returns the length of the products array

returns this when I update my app:

NOTE: That's why I'm not able to understand my application in Next.js. I'm following all the correct guidelines, writing the code perfectly using axios and when I run the application on the website it gives a network error and doesn't show exactly the amount of products that were displayed in the terminal where my application is running.

I've already configured all the request headers correctly, enabling CORS to allow external requests with other API's, and I still don't succeed in returning the data to my application's page.

Answer 1

Wrap the stuff you have to fetch products inside useEffect hook

useEffect(()=>{ 
const ax = axios.create({ headers: { Accept: 'application/json' }});


function test() {
    const res = ax.get("https://vtexstore.codeby.com.br/api/catalog_system/pub/products/search").then((response) => {
        // expected the setProducts to be filled with the return of this request
        setProducts(response.data);
console.log(response.data)
    });
}
test();
},[])

Then in your return of the component, you can use map on products array with null and undefined checks Like

{products && products.map(product=>{})}