Can't loop through array using map loop with react.js & axios - reactjs

Question

I am fetching data from an API, i get all the data in the console.log(this.state.reviews) but i can't access the data after the map loop is done.
The Brand data is accessible, the only problem is with the map loop (the reviews array)
I know it has something with async calls! i have found this Can't access values for Axios calls in map loop Does anyone know how to adapt it with the code below ;-)
class App extends React.Component {
constructor(props){
super(props);
this.state = {
reviews : []
};
}
componentDidMount() {
axios.get(`https://api.prime.com/businesses/reviews/${this.props.BrandId}`)
.then((res) => {
const brand = res.data;
this.setState({
// Reviews data
reviews : brand.reviews.items,
// Brand data
logo : brand.business.logo,
name : brand.business.name,
voters : brand.business.voters,
url : brand.business.url
});
})
}
render() {
console.log(this.state.reviews);
return (
<div className="widget-wrapper">
<OwlCarousel className="reviews-container"
loop
nav
margin={12}
dots={false}
items={5}
autoplay={true}
>
{this.state.reviews.map((review) => {
<div key={review.id} className="review-item">
<a href={this.state.url + '/' + review.slug} target="_blank" rel="nofollow">
<div className="review-heading">{review.subject}</div>
<div className="review-content">{review.message}</div>
</a>
</div>
})}
</OwlCarousel>
</div>
)
}
}

Answer 1

i figured out your problem you need to wait for the promise to resolve that why your state is not set for doing this u can use async await like
import React from "react";
import ReactDOM from "react-dom";
import axios from "axios";
import "./styles.css";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
posts: []
};
}
componentDidMount() {
this.loadData();
}
loadData = async () => {
const res = await axios.get("https://jsonplaceholder.typicode.com/posts");
if (res) {
const posts = res.data;
this.setState({
posts: [...posts]
});
}
};
renderPost = () => {
return this.state.posts
? this.state.posts.map(data => (
<div style={{ color: "black" }}>
<h5>{data.title}</h5>
<p>{data.body}</p>
</div>
))
: "loading...";
};
render() {
console.log(this.state.posts);
return <div> {this.renderPost()}</div>;
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
full app is here check it out : codesandbox