Handling Server-side Errors in Form Submissions
Explains capturing and displaying server-side error feedback in the form UI, leveraging React's state management for error display.
const [errorMessage, setErrorMessage] = useState('');
Initializing a state variable 'errorMessage' to store the server-side error message.
const handleSubmit = async (event) => {
event.preventDefault();
// Reset error message at the start of submission
setErrorMessage('');
try {
// Perform form submission logic here, e.g., using axios or fetch
// const response = await axios.post('/api/form-submit', formData);
// Process successful submission (not shown here)
} catch (error) {
// Capture server-side error
if (error.response && error.response.status >= 400 && error.response.status < 500) {
// Update state with the error message to display it
setErrorMessage(error.response.data.message);
} else {
// Handle other errors differently (not shown here)
console.error('An unexpected error occurred:', error);
}
}
};
The handleSubmit function prevents the default form submission behavior, resets the error message, tries to submit the form data, catches errors, checks if it's a server-side error (status 400-499), and updates the error message state with the received error message.
// In the component's return statement
<form onSubmit={handleSubmit}>
{errorMessage && <div>{errorMessage}</div>}
// Form fields here
<button type="submit">Submit</button>
</form>
Rendering the form with an onSubmit handler set to our handleSubmit function. If there's an errorMessage, it gets displayed above the form fields.