As a backend developer, I am trying to create frontend with React. So, I might have a bit meaningless or simple problem. But I cannot have state updated in the class. However, when I fetch data from backend via axios, inside “render{}” method it gets called.
import "./App.css";
import { Component } from "react";
import { getAllStudents } from "./client";
import Container from "./container";
class App extends Component {
state = {
students: [],
isFetching: false
};
fetchStudents = () => {
this.setState({isFetching : true});
getAllStudents()
.then((res) => res.data)
.then((students) => {
console.log(students)
this.setState({students : students, isFetching: false})
});
};
render() {
const { students, isFetching } = this.state;
...
}
}
export default App;
An my client:
import axios from "axios";
const instance = axios.create({baseURL: 'http://localhost:8080'})
export const getAllStudents = () => instance.get('/students', {
timeout: 5000
})
I tried to show data in a table, but it gives an empty array