Can't get e.preventDefault to work with React Typescript

Question

I have a component that looks like this:

const App = (): ReactElement => {
    
    const submitFeedbackHandler = (e: FormEvent): void => {
        e.preventDefault();
        // ...
    }

    return <>
        <form onSubmit={submitFeedbackHandler}>
            // ...
            <button type='submit'>Submit</button>
        </form>
    </>

}

Problem is, no matter how I try to call submitFeedbackHandler from onSubmit it doesn't work. I tried onSubmit={(e) => submitFeedbackHandler(e)} , but no luck either. How can I get this to work so that I can do e.preventDefault() ?

Answer 1

This might give some headache to inexperienced React developers like myself, so here's the answer to the problem:

I had added the required tag to some inputs in the form. Oddly enough, this stops onSubmit completely from being called. Even simply calling onSubmit = {() => console.log('onSubmit!')} didn't work, so I removed all the required tags from the inputs within the form and it works fine now. I'll do validation of empty fields myself in that case instead of relying on the required tag on inputs.

I think it has to do with controlled and uncontrolled components in React. Will do further research to see exactly what causes this. Thank you @Julius Guevarra for your help.