Edit user information in React - reactjs

Question

I am using axios to get and post user information, but I am somewhat lost on how to handle editing a user's information. I have created a working put endpoint, but I am lost on how to change to editable text in React
User component:
const handleEdit = (user) => {
axios
.put(`/api/User/${user.id}`)
.then(response => {
console.log(response)
})
.catch(error => {
console.log(error)
})
}
return(
<div className="container white">
<h3 className="center">
User List
<Button className="btn-createUser" color="info">
<Link to='/signup'>Add New User</Link>
</Button>
</h3>
<form className="inline-form">
{users.list.map(user => (
<div className="section" key={user.id}>
<div className="divider"></div>
<h5 className="user-userName">{user.username}</h5>
<h5 className="user-userEmail">{user.email}</h5>
<Button className="btn-delete" color="info" onClick={() => handleDelete(user)}>Delete</Button>
<Button className="btn-edit" color="info" onClick={() => handleEdit(user)}>Edit</Button>
</div>
))}
</form>
</div>
);

Answer 1

const [users] = useState([]); //declare users array at top then use setUsers to update
handleChange = event => {
const index = users.findIndex(user => user.userName = event.target.value);
users[index].userName = event.target.value;
setUsers(users);
}

Answer 2

you need to set userName and userEmail in state first. the onChange method will capture new updates.
<input
type="text"
name="username"
value={this.state.username}
onChange={this.handleChange}
/>
handleChange = event => {
this.setState({ username: event.target.value });
};