React - event.preventDefault() not working on submit

Question

I'm wondering why the event.preventDefault isn't working in my post request. When I click the SAVE SETTINGS button, page reloads. If I just put a console.log after my event.preventDefault() it works just fine, so the problem is in my request I suppose. Here's the code, any help is appreciated.

import React, { useEffect, useState } from 'react'
import Button from '../shared/formElements/Button';
import { useHttpClient } from '../shared/hooks/http-hook';
import { useForm } from '../shared/hooks/form-hook';
    ...
    ...

    const Settings = () => {
        const { isLoading, error, sendRequest, clearError } = useHttpClient();
        const [loadedSettings, setLoadedSettings] = useState();
        const [formState, inputHandler] = useForm(
        {
            hostname:
            {
                value: '',
                isValid: false
            },
            username:
            {
                value: '',
                isValid: false
            },
            password:
            {
                value: '',
                isValid: false
            },
    
    ...
    ...
            const settingsSubmitHandler = async event => {
                    event.preventDefault()
                    try {
                        await sendRequest(
                            'http://localhost/api/settings/save',
                            'POST',
                            JSON.stringify({
                                hostname: formState.inputs.hostname.value,
                                username: formState.inputs.username.value,
                                password: formState.inputs.password.value,
                                ...
            
                                ...
                        }),
                        {
                            'Content-Type': 'application/json'
                        }
                    );
                } catch (err) { }
            };

And this my JSX code:

    return (
            <React.Fragment>
                <ErrorModal error={error} onClear={clearError} />
                {isLoading && <LoadingSpinner asOverlay />}
                {!isLoading && loadedSettings && (
                    <form className="settings-form" onSubmit={settingsSubmitHandler}>
                        <div className="container">

            ...

            ...

            <div className="col" align="center">
                <Button type="submit" disabled={!formState.isValid}>SAVE SETTINGS</Button>
            </div>

            ...

Could you try removing your catch, your swallowing any exceptions that might give you a clue.. — Keith
– Keith, Commented Jul 12, 2020 at 14:19
@FDG what do you mean by "it reloads my component"? does the whole page gets reloaded? — Apostolos
– Apostolos, Commented Jul 12, 2020 at 15:42

Ramil Garipov · Accepted Answer · 2020-07-12 14:11:12Z

2

Probably, it's because you use async function and the function body is called in the next tick. If you remove async from function definition, it should work:

const settingsSubmitHandler = event => {
  event.preventDefault()
  sendRequest(...).then(()=> {
    // some async code here
  })
}

answered Jul 12, 2020 at 14:11

Ramil Garipov

4732 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Keith Over a year ago

That won't stop preventDefault

Flavio Del Grosso Over a year ago

Hi Ramil, thanks for your answer, but this unfortunately doesn't work

Ramil Garipov Over a year ago

Really, @Keith is right, async function doesn't block preventDefault. Looks like the problem is not in presented code.

Flavio Del Grosso · Accepted Answer · 2020-07-12 21:57:16Z

0

It seems the problem was {!isLoading && loadedSettings && (, just removing !isLoading now it works fine.

answered Jul 12, 2020 at 21:57

Flavio Del Grosso

6002 gold badges10 silver badges23 bronze badges

Collectives™ on Stack Overflow

React - event.preventDefault() not working on submit

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related