Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Avoid Submitting a Form Twice with React Final Form 'submitting' property

    Tomasz ŁakomyTomasz Łakomy

    Re-submitting the form before the previous submit action has finished can lead to all sorts of bugs.

    In this lesson we are going to see how we can ensure that users won't be able to resubmit the form before the first submit action has resolved by using submitting property from React Final Form render prop.

    reactReact
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Instructor: 00:00 We have a form which currently we can reset or submit. In this example, submit is basically a window alert, but in an actual application, it would be a network request or some server.

    00:12 We would like to ensure that, when we submit the form, as long as the form submit action hasn't completed, we would not be able to submit the form again. Again, to achieve this effect, destructure the submitting property from React Final Form.

    00:27 It is a Boolean value which lets us know whenever we are currently in the process of submitting the form or not. We are going to change the onSubmit function to simulate the network request.

    00:39 It's going to return a new promise, which is going to be resolved after a timeout of a second. Inside of here, we're going to put the function that we had before our alert and resolve the promise.

    00:57 Next, use the submitting property to disable the button whenever either on the form is pristine, or we are currently submitting the form. Let's see with an action. By putting our first name and the second name after I click submit, the button is disabled for a second.

    01:15 Right now it's still disabled, because the submitting action hasn't finished yet. As soon as I click OK, I can go ahead and submit the form again. I can also reset it.

    Discuss

    Discuss