A World without Refs
Consider the following example: you have a website that renders an input field, requesting a user’s email address. It could look something like this:
Figure 7.1: An example form with an email input field
The code for the component that’s responsible for rendering the form and handling the entered email address value might look like this:
function EmailForm() {
const [enteredEmail, setEnteredEmail] = useState('');
console.log(enteredEmail);
function handleUpdateEmail(event) {
setEnteredEmail(event.target.value);
}
function handleSubmitForm(event) {
event.preventDefault();
// could send enteredEmail to a backend server
}
return (
<form className={classes.form} onSubmit={handleSubmitForm}>
<label htmlFor="email">Your email</label>
<input type="email" id="email" onChange={handleUpdateEmail} />
<button>Save</button...
