React Submit Forms

Submitting Forms

You can control the submit action by adding an event handler in the onSubmit attribute for the <form>

Add a submit button and an event handler in the onSubmit attribute:

import { useState } from 'react';
import { createRoot } from 'react-dom/client';

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

function handleChange(e) {
setName(e.target.value);
}

function handleSubmit(e) {
e.preventDefault();
alert(name);
}

return (
<form onSubmit={handleSubmit}>

Formula

< label > Enter your name:

<input type="text"

value={name}
onChange={handleChange}

/> </label> <input type="submit" /> </form> )

createRoot(document.getElementById('root')).render( <MyForm />

);

Example »

React Forms

React forwardRef

Loading lesson path

React•React Core Practice