I'm new in React.JS. I want to bind data from the API in a HTML code.
Here is a GET
method with axios from the API:
componentDidMount() {
var token = localStorage.getItem('accessToken');
var config = {
headers: { 'Authorization': "Bearer " + token }
};
var apiBaseUrl = "https://**********/";
const that = this;
axios.get(apiBaseUrl + 'api/Account/UserInfo', config)
.then(function (response) {
console.log(response.data);
if (response.status === 200) {
that.setState({ userInfo: response.data });
console.log(that.state.userInfo.Email);
}
else {
console.log(response.data);
}
})
.catch(function (error) {
console.log(error);
});
}
The console shows me
{Email: "xxxxxxx@yahoo.com", HasRegistered: true, LoginProvider: null}
Now I want to display the email address in HTML. How can I do this?
Here you've set the state
that.setState({ userInfo: response.data });
To access it - try this.state.userInfo.Email
You can put that into some html elements like this
<p>{this.state.userInfo.Email}</p>
In JSX you can show like this
render(){
return (
<p>{this.state.userInfo ? this.state.userInfo.Email : 'Email is not provided'}</p>
)
}
in JSX you just define
render(){
const email = this.state.userInfo? this.state.userInfo.Email:'';
return(
<div>{email}</div>
)
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.