Get data from Node REST API and populate other controls - node.js

Question

After login in React Web app, I am going to show profile detail to user and I am fetching profile detail from NODE REST API. I am not sure how to do that. I think the problem is in the render section, because if I don't use the render section then it is showing me some data.
export class AccountDetails extends Component {
constructor (props) {
super(props)
this.state = {
userDetail:null
}
this.callAPI()
}
async callAPI() {
await fetch("http://localhost:5000/customers?email="+JSON.parse(localStorage.getItem('email'))
.then(res=>res.json())
.then(res=>this.setState({userDetail:res}));
console.log(this.state.userDetail);
}
this is my render section
<tr>
<td className="text-left">First Name : </td>
<td className="text-left">{this.userDetail.firstName}</td>
</tr>
I am getting null in console.log
If I don't use {this.userDetail.firstName} then I am getting
0:
email: "manu#gmail.com"
firstName: "Manpreet"
lastName: "Narang"
occupants: 2
phone: 12345
__proto__: Object
length: 1
__proto__: Array(0)

Answer 1

Since you're using classes you need to make your fetch in componentDidMount like so:
constructor (props) {
super(props)
this.state = {
userDetail: null,
isLoaded: false // Notice this new property and check the render method below
}
}
componentDidMount() {
fetch("http://localhost:5000/customers?email="+JSON.parse(localStorage.getItem('email'))
.then(res => res.json())
.then(res => this.setState({ userDetail: res, isLoaded: true }));
}
Only then will the setState work and rerender your component.
Then, in your render method:
render() {
if(!isLoaded) return <p>Loading...</p>
return (
<tr>
<td className="text-left">First Name : </td>
<td className="text-left">{this.userDetail.firstName}</td>
</tr>
)
}
Reference: https://reactjs.org/docs/react-component.html#componentdidmount