Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reset state after a successfull form submission #14

Open
balazsorban44 opened this issue Sep 8, 2020 · 0 comments
Open

Reset state after a successfull form submission #14

balazsorban44 opened this issue Sep 8, 2020 · 0 comments
Assignees
Labels
enhancement New feature or request

Comments

@balazsorban44
Copy link
Owner

balazsorban44 commented Sep 8, 2020

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.

@balazsorban44 balazsorban44 added the enhancement New feature or request label Sep 8, 2020
@balazsorban44 balazsorban44 self-assigned this Sep 8, 2020
@balazsorban44 balazsorban44 changed the title Reset state when submitting Reset state after a successfull form submission Sep 8, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

1 participant