Single JSON Object read Title render method issue in React.js - reactjs

Question

I have following code which render an console single Object json. When I try to render title or content it gives me an error.
import React, { Component } from 'react'
import axios from 'axios';
export default class Single extends Component {
constructor(props) {
super(props)
this.state = {
postData :[]
}
}
componentDidMount() {
axios.get(`https://example.co/wp-json/wp/v2/company/2575`)
.then(res => {
const postData = res.data;
this.setState({ postData });
})
}
render() {
return (
<div>
{/* {console.log(this.state.postData)} */}
<section className="sf-detail-page">
<div className="container">
<div className="row">
<div className="col-md-10 detail main">
<div className="row detail-page-compnay-content">
<div className="col-md-12">
{console.log(this.state.postData)}
<h1 key={this.state.postData.id}>{this.state.postData.id}</h1>
<h2 key={this.state.postData.id}>{this.state.postData.title.rendered}</h2>
)
}
}
{"id":2575,"date":"2020-08-22T04:53:04","date_gmt":"2020-08-22T04:53:04","title":{"rendered":"Vasim"},"content":{"rendered":"This is demo"}}
Update Code :
import React, { Component } from 'react'
import axios from 'axios';
export default class Single extends Component {
constructor(props) {
super(props)
this.state = {
postData :Object
}
}
componentDidMount() {
axios.get(`https://example.co/wp-json/wp/v2/company/2575`)
.then(res => {
const postData = res.data;
this.setState({ postData });
})
}
render() {
if (!this.state.postData) {
return(
<div>Loading...</div>
)
}
return (
<div>
{/* {console.log(this.state.postData)} */}
<section className="sf-detail-page">
<div className="container">
<div className="row">
<div className="col-md-10 detail main">
<div className="row detail-page-compnay-content">
<div className="col-md-12">
{console.log(this.state.postData)}
<h1 key={this.state.postData.id}>{this.state.postData.id}</h1>
<h2 key={this.state.postData.id}>{this.state.postData.title.rendered}</h2>
</div></div></div></div></div></section>
</div>
)
}
}

Answer 1

this.state.postData is an empty array on first render and you're trying to access this.state.postData.title.rendered, which will not work.
Change initial state to null instead of []
Add a condition before rendering the data to check if it's loaded yet. Something like:
if(!this.state.postData) return "loading..."