this.state not showing in html - reactjs

Question

Most likely I'm doing this wrong, when I console.log this.state.name and email it shows up in the console but when I render it doesn't show up. I'm vey new to react so please excuse the code, if there is a better method of doing this please show me. what Im trying to do here is fetch a profile page from an axios.get request (profilePage) and display this data on the page
import React, { Component } from 'react';
import { profilePage } from '../UserFunctions'
export default class Profile extends Component {
constructor() {
super();
//Set default message
this.state = {
param: null,
message: 'Loading...',
name: '',
email: ''
}
}
componentDidMount() {
let Paramvalue=this.props.match.params.id;
this.state.param = Paramvalue
var user = this.state.param
profilePage(user).then(res => {
this.state.name = res.data[0].fname + ' ' + res.data[0].lname
this.state.email = res.data[0].email
console.log(this.state.name)
})
}
render() {
return (
<div>
<h1>Home</h1>
<h1>{this.state.name}</h1>
<h1>{this.state.email}</h1>
</div>
);
}
}

Answer 1

this is because you are directly mutating the state object instead of calling setState so a re-render is not triggered. Here is a modified version of your code which should work as expected.
import React, { Component } from 'react';
import { profilePage } from '../UserFunctions'
export default class Profile extends Component {
constructor() {
super();
//Set default message
this.state = {
param: null,
message: 'Loading...',
name: '',
email: ''
}
}
componentDidMount() {
let user=this.props.match.params.id;
profilePage(user).then(res => {
this.setState({
name: res.data[0].fname + ' ' + res.data[0].lname,
email: res.data[0].email,
param: user,
});
})
}
render() {
return (
<div>
<h1>Home</h1>
<h1>{this.state.name}</h1>
<h1>{this.state.email}</h1>
</div>
);
}
}