URL Image only shows when browser resized - reactjs

Question

I am using React.js and firebase. I am fetching an image from firebase and trying to render it in a component.
When the image URL is available, I setState the URL, but the image still does not show.
componentDidMount(){
const that = this;
firebase
.storage()
.ref("hero1.png")
.getDownloadURL()
.then(url => {
console.log(url);
that.setState({url})
})
.catch(error => {
// Handle any errors
});
}
// rendering the image
...
{ this.state.url &&
this.state.slides.map((slide, index) => {
console.log(slide.imageUrl); // url is being printed here
return (
<div
key={index}
onDragStart={this.handleOnDragStart}
className="slider-wrapper"
>
<div key={index} className="slider-content">
<img src={this.state.url} /> // when I set a hard-coded url, it works, but
//does not work in state
</div>
</div>
);
})}
...
One more thing, when I resize the browser, the image shows up immediately. Don't know why

Answer 1

Try this one, I removed key from the child div and updated the other key to slide.imageUrl:
{ this.state.url &&
this.state.slides.map((slide, index) => {
console.log(slide.imageUrl); // url is being printed here
return (
<div
key={slide.imageUrl}
onDragStart={this.handleOnDragStart}
className="slider-wrapper"
>
<div className="slider-content">
<img src={this.state.url} /> // when I set a hard-coded url, it works, but
//does not work in state
</div>
</div>
);
})}

Answer 2

I was using a library (react-alice-carousel) to render the slides of images. This was causing problem. Just switched the library to react-animated-slider, and it worked.
Thanks, everybody for helping me and for your time.