react-bootstrap spinner does not render - reactjs

Question

Attempting to use react-boostrap Spinner in a React component. A typical scenario where the component displays a Spinner until response data is received from a backend API call.
There is a flag - isDataFetched which is initially false and gets set in componentDidMount() only when the response data is received. Conditional rendering allows disabling the data table until response is received and instead tried displaying Spinner. However, the spinner simply does not show.
Bumped react-bootstrap version to v1.14.0 after realizing that Spinner was introduced only later. The issue did not resolve though.
import React, { Component } from 'react';
import { Spinner } from 'react-bootstrap';
import DataService from '../service/DataService';
class ProjectListComponent extends Component {
constructor(props) {
super(props);
this.state = {
tech: 'cb',
formState: {
isDataFetched: false
}
}
this.refreshProjects = this.refreshProjects.bind(this);
}
componentDidMount() {
this.refreshProjects();
}
refreshProjects(tech) {
if (!tech) {
tech = 'cb';
}
DataService.findProjectsByTech(tech)
.then(
response => {
this.setState({
formState: {
...this.state.formState,
isDataFetched: true
},
tech: tech,
projects: response.data
});
}
).catch(exp => {
//some exception handling
});
}
render() {
return (
<div className="container">
<h4>Projects List</h4>
{this.state.formState.isDataFetched && this.state.formState.isDataFetched === false && (
<Spinner animation="border" role="status">
<span className="sr-only">Loading...</span>
</Spinner>
)}
{this.state.formState.isDataFetched && this.state.formState.isDataFetched === true && (
<p>Data Table</p>
)}
</div>
)
}
}
export default ProjectListComponent

Answer 1

Theres a lot of errors in your code, your only setting the flag after the response and this condition this.state.formState.isDataFetched && this.state.formState.isDataFetched === false && can never pass
try this:
class ProjectListComponent extends Component {
constructor(props) {
super(props);
this.state = {
tech: 'cb',
formState: {
isDataFetched: false
}
}
this.refreshProjects = this.refreshProjects.bind(this);
}
componentDidMount() {
this.refreshProjects();
}
refreshProjects(tech) {
if (!tech) {
tech = 'cb';
}
this.setState({
formState: {
...this.state.formState,
isDataFetched: true
})
DataService.findProjectsByTech(tech)
.then(
response => {
this.setState({
tech: tech,
projects: response.data
});
}
).catch(exp => {
//some exception handling
});
this.setState({
formState: {
...this.state.formState,
isDataFetched: false
})
}
render() {
return (
<div className="container">
<h4>Projects List</h4>
{this.state.formState.isDataFetched &&
<Spinner animation="border" role="status">
<span className="sr-only">Loading...</span>
</Spinner>
)}
{!this.state.formState.isDataFetched && this.state.projects && (
<p>Data Table</p>
)}
</div>
)
}
}
export default ProjectListComponent
ALSO, I recommend changing the flag to a more accurate name like isDataFatching

Answer 2

Fixing the logic in the conditional rendering part as pointed by #roy-b helped achieve the desired output.
{!this.state.formState.isDataFetched && (
<Spinner animation="border" role="status">
<span className="sr-only">Loading...</span>
</Spinner>
)}
{this.state.formState.isDataFetched && (
<p>Data Table</p>
)}