Call api on page load in React

Question

I am learning React and I am trying to call an API on my page load, but I haven't had much success so far. I am trying to call an API which will pull an JSON that is used to fill my grid. Here is my code:

import React, { Component, useCallback, useState, useEffect } from "react";
import axios from 'axios';


import './styles.css';
import '@progress/kendo-theme-default/dist/all.css';
import { Grid, GridColumn, GridToolbar } from "@progress/kendo-react-grid";
import { DropDownList } from "@progress/kendo-react-dropdowns";
import { GridPDFExport } from "@progress/kendo-react-pdf";
import { ExcelExport } from "@progress/kendo-react-excel-export";

export function GridTable1({}) {
  
  const [ grid1, setGrid1 ] = useState();

  const fillTable= async () => {
     await  axios
          .get('http://11.11.21.111:8888/api/v1/CheckTablespace')
          .then((res) => {
            setGrid1(res.rlista)
          });
          console.log('Log this');
      }

     
      useEffect(() => {
        
        fillTable();
      }, [])
 
    return (
...
...
  );
}

The console log isn't logged, so I don't know what to do. Help would be very much appreciated

Answer 1

Try this!!!

export function GridTable1() {
      const [ grid1, setGrid1 ] = useState();
    
  useEffect(() => {
         axios
          .get('http://11.11.21.111:8888/api/v1/CheckTablespace')
          .then((res) => {
            setGrid1(res.rlista)
          });
          console.log('Log this');
  }, []);

  return (
{grid1 &&
    <div>
     ...your HTML
    </div>}
  );
}