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
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>}
);
}