how to show a new user on the page? - reactjs

Question

I'm a Junior. I could not find information on the Internet and could not solve it myself. I use for my app the react with axios. Through the post request I want to add a new user. How to show a new user on the page? not in the console.
import React from "react"; import axios from "axios";
class PersonInput extends React.Component {
state = {
name: '',
}
handleChange = (event) => {
this.setState({name: event.target.value});
}
handleSubmit = (event) => {
event.preventDefault();
const user = {
name: this.state.name
};
axios.post(`https://jsonplaceholder.typicode.com/users`, {user}).then((res) => {
console.log(res);
})
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<label>
User Name:
<input type="text" name="name" onChange={this.handleChange} />
</label>
<button type="submit">Add user</button>
<ul>{this.state.res}</ul>
</form>
</div>
);
}
}
export default PersonInput;

Answer 1

You didn't need to make a post request for it.
Try this:
import React from "react"; import axios from "axios";
class PersonInput extends React.Component {
state = {
name: '',
users: ''
}
handleChange = (event) => {
this.setState({name: event.target.value});
}
handleSubmit = (event) => {
event.preventDefault();
this.setState({users: this.state.name});
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<label>
User Name:
<input type="text" name="name" onChange={this.handleChange} />
</label>
<button type="submit">Add user</button>
<ul>{this.state.users}</ul>
</form>
</div>
);
}
}
export default PersonInput;

Answer 2

Define a new key to your state and when u get response store it in that key
state = {
name: '',
res: []
}
onSubmit = async e => {
e.preventDefault();
const data = { name: this.state.name };
const response = await axios.post('https://jsonplaceholder.typicode.com/users', data);
this.setState({res: response.data});
}
And use async await it is easier and cleaner. Just a personal preference