ReactJS: Using state causes error rendering heading - reactjs

Question

console.log() inside componentDidMount() works with no problem.
This works as expected with logging working correctly:
Here is the problem; inside return for App it's not letting me render the <h1>:
render() {
return (
<div className="App">
<Navbar />,
<h1>{this.state.users.data[0].images.original.webp}</h1>
</div>
);
}
This code however works without < h1>:
import React, { Component } from "react";
import Navbar from "./components/Navbar";
import "./App.css";
import axios from "axios";
class App extends Component {
state = {
users: [],
loading: false
};
async componentDidMount() {
this.setState({ loading: true });
const res = await axios.get(
"http://api.giphy.com/v1/stickers/search?q=monster&api_key=sIycZNSdH7EiFZYhtXEYRLbCcVmUxm1O"
);
this.setState({ users: res.data, loading: false });
console.log(123);
console.log(this.state.users.data[0].images.original.webp);
}
render() {
return (
<div className="App">
<Navbar />
</div>
);
}
}
export default App;
Please help me understand why this is happening

Answer 1

You need to ensure that the users data is present in your component's state before attempting to access and render it (ie in your <h1> element).
Keep in mind that the component's render() method will be called before componentDidMount() (ie before the network request has completed). This means you'll need to account for users data not being present in your component's rendering logic. Consider making the following changes to your component to solve this:
class App extends Component {
state = {
users: null, /* Set users inital state to null */
loading: false
};
async componentDidMount() {
this.setState({ loading: true });
const res = await axios.get(
"http://api.giphy.com/v1/stickers/search?q=monster&api_key=sIycZNSdH7EiFZYhtXEYRLbCcVmUxm1O"
);
/* Trigger re-render. The users data will now be present in
component state and accessible for use/rendering */
this.setState({ users: res.data, loading: false });
}
render() {
return (
<div className="App">
<Navbar />
{ /* If state.users is null, show loading string, otherwise render data */ }
<h1>
{ this.state.users === null ? "Loading" :
this.state.users.data[0].images.original.webp }
</h1>
</div>
);
}
}

Answer 2

this because the this.state.users is empty array at the first time , when the component mount http request sent and when the response is ready you change the state .
to fix the issue do this :
render() {
return (
<div className="App">
<Navbar />,
{
this.state.user.length > 0 ?
<h1>{this.state.users.data[0].images.original.webp}</h1>
:
<h1>Loading...</h1>
}
</div>
);
}