unable to display response from post request in react - reactjs

Question

i am new to react development.
I am able to get response from post request and print in console but nt sure how to display it on main page.
code from app.js for my ui
render() {
return (
<div className="App">
<h1>Enter Email Address to Verify</h1>
<h1>{this.state.response.body}</h1>
<form onSubmit={this.handleSubmit}>
<p>
<strong>Address:</strong>
</p>
<input
type="text"
value={this.state.post}
onChange={e => this.setState({ post: e.target.value })}
/>
<button type="submit">check</button>
</form>
</div>
);
}
this is the way i get it print on console
console.log(wellFormed, validDomain, validMailbox);
handleSubmit = async e => {
e.preventDefault();
const response = await fetch('/api/v1/verifier', {
method: 'POST',
// body: this.state,
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ post: this.state.post }),
});
const body = await response.text();
this.setState({ responseToPost: body });
};
From verifier method
res.send(
`response received , welllformed = ${wellFormed}, validDomain = ${validDomain}, validMailbox = ${validMailbox}`,
)

Answer 1

Most of the time you will get a JSON response which is nothing but an Array of objects. So you can put that to a state then use higher order function map to render each element to the Dom.
let's assume that your response is like this.
[{"activeCases":"5132472","country":"USA"} ,"activeCases":"455602","country":"India"}]
you can refer each object as course(it can be any name) inside the map method.
{this.state.response.map((course) => (
<div>
<h3>Active cases :{course.activeCases}</h3>
<h5>country :{course.country}</h6>
</div>
))}
This will render each data in your repose to the Dom like thise.
Active cases :5132472
country :USA
Active cases :455602
country :India

Answer 2

render() {
return (
<div className="App">
<h1>Enter Email Address to Verify</h1>
<h2>{this.state.response.body}</h2>
<form onSubmit={this.handleSubmit}>
<p>
<strong>Email Address:</strong>
</p>
<input
type="text"
value={this.state.post}
onChange={e => this.setState({ post: e.target.value })}
/>
<button type="submit">Verify</button>
</form>
<p>{this.state.responseToPost}</p>
</div>
);
}
This worked for me