http-response-handler
Version:
A comprehensive utility for standardizing HTTP responses in Node.js applications
106 lines (95 loc) • 3.17 kB
JSX
import React, { useState } from 'react'
import axios from 'axios'
export default function UserPost() {
const [formData, setFormData] = useState({
username: '',
email: '',
password: '',
role: '',
mobile: ''
});
const [message, setMessage] = useState('');
const handleChange = (e) => {
setFormData({
...formData,
[e.target.name]: e.target.value
});
};
const handleSubmit = async (e) => {
e.preventDefault();
try {
const response = await axios.post('http://localhost:5500/user', formData);
setMessage(response.data.message);
setFormData({
username: '',
email: '',
password: '',
role: '',
mobile: ''
});
} catch (error) {
setMessage(error.message);
}
};
return (
<div>
<h2>User Registration</h2>
{message && <div>{message}</div>}
<form onSubmit={handleSubmit}>
<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">Register</button>
</form>
</div>
);
}