Flash cards
Review the key moves
1/4
Core idea
What is the main idea behind React Submit Forms?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
1Quick choice
Which statement best captures the main point of this lesson?
2Fill blank
Complete the missing token from the example code.
___ { useState } from 'react';Submitting Forms
You can control the submit action by adding an event handler in the onSubmit attribute for the <form> :
Example
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}> <label>Enter your name: <input
type="text"
value={name}
onChange={handleChange}
/> </label> <input type="submit" /> </form> )
}
createRoot(document.getElementById('root')).render( <MyForm /> );