React not rendering, empty props object - reactjs

Question

Trying to learn react, following a tutorial. I am having difficulty getting data from my API (mongodb using whatwg-fetch") and rendering the items. The database is running, and no errors in react. The developer tools reports "props object empty", did some research and narrowed it down to the asynchronous nature of react. Apparently, it is rendering before data comes in. However, I have implemented a promise and yet no change in result. Any help will be greatly appreciated.
I have added a promise.
// App.js file
import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';
import Product from "../components/product/product"
import HttpService from "../services/http-service";
const http = new HttpService();
class App extends Component {
constructor(props) {
super(props);
this.state = {
products: []
}
// Bind functions
this.loadData = this.loadData.bind(this);
this.productList = this.productList.bind(this);
this.loadData()
};
loadData = () => {
let self = this;
http.getProducts().then(data => {
self.setState({products: data})
}, err => {
});
}
productList = () => {
const list = this.state.products.map((product) =>
<div className="inItems" key={product._id}>
<Product title={product.title} price={product.price} imgUrl=
{product.imgUrl} />
</div>
);
console.log(list)
return (list)
}
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Welcome
</p>
<div className="container App-main">
<div className="items">
<h1>List Of Products</h1>
{this.productList()}
</div>
</div>
</header>
</div>
);
}
}
export default App;
// service.js file
import "whatwg-fetch";
class HttpService {
getProducts = () => {
let promise = new Promise((resolve, reject) => {
fetch("http://localhost:7500/product-list", {mode: "no-cors",
credentials: 'include' })
.then(res => {
resolve(res.json())
}).catch(err => {
if (err) throw err;
reject(err)
})
});
return promise;
}
}
export default HttpService;
Expecting items to display on screen. Nothing displays and no errors in console.

Answer 1

you need to await Data (const data = await http.getProducts()) or simply use axios https://www.npmjs.com/package/axios
.then mean once you receive response, you gonna do something, still the outer scope will keep running and still data is empty