Display one object from fetched data undefined - reactjs

Question

I'm new to React and I'm having a hard time trying to display the first element of an array for example. I'm getting a TypeError: Cannot read property 'title' of undefined even if it's working with a console.log. Here is the code :
constructor() {
super()
this.state = {
posts: []
}
this.componentDidMount = this.componentDidMount.bind(this)
}
async componentDidMount() {
const url = "https://jsonplaceholder.typicode.com/posts";
const response = await fetch(url);
const data = await response.json();
this.setState({
posts: data
})
console.log(data); //working
console.log(this.state.posts) //working
console.log(this.state.posts[0].title) //working
}
render() {
return (
<div className="head-title"> { this.state.posts[0].title } </div>
<div className="head-body"> { this.state.posts[0].body} </div>
)
}
What am I doing wrong ?

Answer 1

You can do like this. In addition to my answer :
class test extends Component{
constructor() {
super()
this.state = {
posts: [],
loading :true
}
this.componentDidMount = this.componentDidMount.bind(this)
}
async componentDidMount() {
const url = "https://jsonplaceholder.typicode.com/posts";
const response = await fetch(url);
const data = await response.json();
this.setState({
posts: data,
loading:false
})
console.log(data); //working
console.log(this.state.posts) //working
console.log(this.state.posts[0].title) //working
}
}
render() {
if(this.state.loading) return null;//Dont render component
//or add ternary condition
return (
<div className="head-title"> { this.state.posts[0].title } </div>
<div className="head-body"> { this.state.posts[0].body} </div>
)
}
}

Answer 2

Your component will attempt to render this.state.posts[0].title while the request still hasn't finished and thus will throw an error.
Add a check to make sure your data exists for example like so:
render() {
return (
<div className="head-title"> { (this.state.posts.length > 0) ? this.state.posts[0].title : null } </div>
<div className="head-body"> { (this.state.posts.length > 0) ? this.state.posts[0].body : null} </div>
)
}