prevent render attempt if item not loaded from state yet - reactjs

Question

I am requesting an image from cloudinary and at face value everything seems fine as I can see the image on the frontend as intended. But when looking at chrome dev tools I can see that first there was a 404 error which shows a call to the path where the image is stored but without the image name. For the second call which is successful, there is the path and the image name.
So, It appears that before the image name is not yet loaded from the state at the time the first request is made. I did try the && conditional check but that had the same result ie:
{this.state.bgImg && this.state.bgImg}
Then I tried:
{this.state.bgImg ? this.state.bgImg : "fakeImage.jpg"}
And in dev tools I see it actually tried to get that fakeImage.jpg
How can I prevent this?
class Home extends Component {
state = {
title: "",
bgImg: "",
categories: []
};
async componentDidMount() {
const response = await getHero();
const { data: categories } = await getCategories();
this.setState({
title: response.data.title,
categories,
bgImg: response.data.bgImg
});
}
render() {
return (
<React.Fragment>
<NavBar />
<Hero
title={this.state.title}
bgImg={this.state.bgImg && this.state.bgImg}
/>
</React.Fragment>
);
}
}
export default Home;
const imageUrl = process.env.REACT_APP_CLOUDINARY_URL;
class Hero extends Component {
render() {
const { title, bgImg } = this.props;
return (
<section
className="section-hero d-flex justify-content-center align-items-center mb-5"
style={{
backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(${imageUrl}/somepath/${bgImg})`
}}
>
<Container className="text-center text-white">
<h1>{title}</h1>
</Container>
</section>
);
}
}
export default Hero;

Answer 1

For the initial render of your Home component, you pass an empty string to Hero for the bgImg prop. You will get a 404 error because no image was found in this path.
url(${imageUrl}/somepath/${bgImg}) <--- bgImg is an empty string on first render.
To workaround this, you can just do a conditional check so that your Hero component only renders when the bgImg-state in Home is a truthy value, which it will be after the completed fetch in componentDidMount.
So for the first render we will give bgImg a default value of null (that makes sense) because there is no-value. Hero component will not be used yet (so no 404 error). Then after componentDidMount, everything will work as expected.
class Home extends Component {
state = {
title: "",
bgImg: null,
categories: []
};
async componentDidMount() {
const response = await getHero();
const { data: categories } = await getCategories();
this.setState({
title: response.data.title,
categories,
bgImg: response.data.bgImg
});
}
render() {
const { bgImg } = this.state
return (
<React.Fragment>
<NavBar />
{ bgImg && (
<Hero
title={this.state.title}
bgImg={bgImg}
/>
)}
</React.Fragment>
);
}
}
export default Home;