DEV Community

Chibuikem Victor Ugwu
Chibuikem Victor Ugwu

Posted on

onSubmit in React.js Forms: Why action="" and method="" don’t apply anymore

Back then in HTML, we would use:

The browser handles everything automatically.

But in React, we don’t let the browser reload the page - we handle it manually.

Using onSubmit in React lets you control what happens when the form is submitted:

function MyForm() {
const handleSubmit = (e) ={
//
};

return (

  Submit
Enter fullscreen mode Exit fullscreen mode

);
}

*Why this approach?
*

No page reloads

You control the logic

Perfect for validations

Works well with APIs (fetch/axios)

Better user experience

*Capturing inputs with useState
*

React uses controlled components:

const [name, setName] = useState("");

value={name}
onChange={(e) => setName(e.target.value)}
/>

This gives you full control of the data.

React forms felt strange at first, but once you understand onSubmit, preventDefault(), and useState, everything starts to click.

Top comments (0)