Description
Is your feature request related to a problem? Please describe.
When a user fills out a form and submits it, it is often desired that all the input fields are cleared, and the values are set back to initial/default values
Describe the solution you'd like
Such a functionality can be baked into onSubmit
:
1. Provide a simple reset()
function parameter, that takes no arguments, and reuses the useForm#initialState
value.
const form = useForm({
//...
// Whatever is set here is the new value of `form.fields`, after `reset()` is called
// If `initialState` is set async (meaning it's value changed over time), the last value will be used.
initialState: {
email: ""
},
async onSubmit({fields, reset}) {
try {
//... submit your form here
reset() // when the form was submitted successfully, you can call reset() to clear all the input fields
} catch(e) {
// if the submission failed, handle the error here
}
}
})
2. Alternatively, you could take an object as an argument, for partial resetting:
This way, the user can selectively reset certain fields, but it also introduces more complexity, while in most cases, a simple reset would be enough.
const initialState = {
email: "",
name: ""
}
const form = useForm({
//...
initialState,
async onSubmit({fields, handleChange}) {
try {
//... submit your form here
handleChange({ // when the form was submitted successfully, you can call handleChange to change any fields you would like.
...initialState,
email: fields.email // Prevents the e-mail field to be cleared
})
} catch(e) {
// if the submission failed, handle the error here
}
}
})
3. useForm()
could return a state
property, that is set to one of these values:
type FormState = "validationErrors" | "submitPending" | "submitError" | "submitSuccess"
This could replace/accompany useForm()#loading
, as a good practice:
https://kentcdodds.com/blog/stop-using-isloading-booleans
This keeps the useForm()
API clean and lower level, while also solving other potential issues by being able to track the precise state of the form at all times.
For example, useForm comes with a built-in notification handling, which may add unnecessary complexity to the API. With a simple state
property, the user could simply handle notifications themselves.
Describe alternatives you've considered
A workaround with today's API could look like this:
// Option 3. could simplify this, by not having to set the `submitted` state manually.
const initialState = {
email: "",
} // This must either be defined outside of the component or be wrapped in `React.useMemo` to be reuseable in the `useEffect code below`
const [submitted, setSubmitted] = React.useState(false)
const form = useForm({
//...
initialState,
async onSubmit({fields, handleChange}) {
try {
//... submit your form here
setSubmitted(true) // when the form was submitted successfully, set a submitted state
} catch(e) {
// if the submission failed, handle the error here
}
}
})
React.useEffect(() => {
if(submitted) {
handleChange(initialState)
setSubmitted(false)
}
}, [submitted, handleChange, initialState]) // You would only need to add initialState, if it was defined inside the component
UPDATE:
After an internal discussion, I landed on option 3, as it has a real potential to simplify the API by getting rid of notification handling.
Activity