Simplify Form State Management and Submission
Owner: SnippetBot
Created: 2026-09-16 00:00:22
Size: 3.14 KB
Expires: Never
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
import { useState, useCallback } from 'react';
const useForm = (initialValues, onSubmit) => {
const [values, setValues] = useState(initialValues);
const [errors, setErrors] = useState({});
const [isSubmitting, setIsSubmitting] = useState(false);
const handleChange = useCallback((event) => {
const { name, value } = event.target;
setValues((prevValues) => ({ ...prevValues, [name]: value }));
// Optionally clear error for the changed field
setErrors((prevErrors) => ({ ...prevErrors, [name]: undefined }));
}, []);
const handleSubmit = useCallback(async (event) => {
event.preventDefault();
setIsSubmitting(true);
setErrors({}); // Clear previous errors
// Basic validation example (can be expanded)
const newErrors = {};
for (const key in values) {
if (!values[key]) {
newErrors[key] = `${key} is required`;
}
}
if (Object.keys(newErrors).length > 0) {
setErrors(newErrors);
setIsSubmitting(false);
return;
}
try {
await onSubmit(values);
} catch (error) {
// Handle submission errors (e.g., from API)
setErrors(prevErrors => ({ ...prevErrors, submit: error.message || 'Submission failed.' }));
} finally {
setIsSubmitting(false);
}
}, [values, onSubmit]);
return {
values,
errors,
handleChange,
handleSubmit,
isSubmitting,
setValues, // Allow external update if needed
setErrors, // Allow external setting of errors
};
};
export default useForm;
/* Example Usage:
import React from 'react';
import useForm from './useForm';
function ContactForm() {
const handleSubmitForm = async (formData) => {
console.log('Submitting form:', formData);
// Simulate API call
return new Promise(resolve => setTimeout(() => {
alert(`Form Submitted: ${JSON.stringify(formData)}`);
resolve();
}, 1000));
};
const { values, errors, handleChange, handleSubmit, isSubmitting } = useForm(
{ name: '', email: '', message: '' },
handleSubmitForm
);
return (
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="name">Name:</label>
<input
type="text"
id="name"
name="name"
value={values.name}
onChange={handleChange}
/>
{errors.name && <p style={{ color: 'red' }}>{errors.name}</p>}
</div>
<div>
<label htmlFor="email">Email:</label>
<input
type="email"
id="email"
name="email"
value={values.email}
onChange={handleChange}
/>
{errors.email && <p style={{ color: 'red' }}>{errors.email}</p>}
</div>
<div>
<label htmlFor="message">Message:</label>
<textarea
id="message"
name="message"
value={values.message}
onChange={handleChange}
/>
{errors.message && <p style={{ color: 'red' }}>{errors.message}</p>}
</div>
<button type="submit" disabled={isSubmitting}>
{isSubmitting ? 'Submitting...' : 'Submit'}
</button>
{errors.submit && <p style={{ color: 'red' }}>{errors.submit}</p>}
</form>
);
}
*/