http-response-handler
Version:
A comprehensive utility for standardizing HTTP responses in Node.js applications
109 lines (98 loc) • 3.32 kB
JSX
import React, { useState } from "react";
import axios from "axios";
import { useParams } from "react-router-dom";
export default function UserUpdate() {
const [formData, setFormData] = useState({
username: "",
email: "",
password: "",
mobile: "",
role: "",
});
const [message, setMessage] = useState(null);
const { id } = useParams();
const token = localStorage.getItem("token");
const handleChange = (e) => {
setFormData({
...formData,
[e.target.name]: e.target.value,
});
console.log(e.target.value,"e");
};
const handleSubmit = async () => {
try {
const response = await axios.put(
`http://localhost:5500/user/update/${id}`,formData,
{
headers: { Authorization: `Bearer ${token}` },
},
);
setFormData(response.data);
} catch (error) {
setMessage(error.response.data.message);
}
};
return (
<div>
<h1>Update User</h1>
<div>
{message && <p>{message}</p>}
<div>
<input
type="text"
name="username"
placeholder="Username"
value={formData.username}
onChange={handleChange}
required
/>
</div>
<div>
<input
type="email"
name="email"
placeholder="Email"
value={formData.email}
onChange={handleChange}
required
/>
</div>
<div>
<input
type="password"
name="password"
placeholder="Password"
value={formData.password}
onChange={handleChange}
required
/>
</div>
<div>
<input
type="text"
name="mobile"
placeholder="Mobile Number"
value={formData.mobile}
onChange={handleChange}
required
/>
</div>
<div>
<select
name="role"
value={formData.role}
onChange={handleChange}
required
>
<option value="">Select Role</option>
<option value="user">User</option>
<option value="admin">Admin</option>
</select>
</div>
<button type="submit" onClick={handleSubmit}>
Register
</button>
</div>
</div>
);
}