19
Form events in React
This article will combine the state to manipulate formularies.
This is what we will have by the end of the article.
Our code examples are getting more complex, but we can still break this down by focusing only on new things:
import { useState } from "react";
export default function App() {
const [name, setName] = useState("");
function onSuscribe(event) {
event.preventDefault();
alert(`Welcome on board ${name}`);
}
function onName(event) {
setName(event.target.value);
}
return (
<div className="App">
<h1>Our new customer is {name}</h1>
<form onSubmit={onSuscribe}>
<input value={name} onChange={(event) => onName(event)} />
<br />
<button>Suscribe</button>
</form>
</div>
);
}Note that the code to trigger the submission is attached to the form instead of the button.
onSubmit property in the form tag to run a function when the user press the form button.event.preventDefault() on the onSuscribe function. This line is necessary to avoid the webpage to reload automatically after sending the form.Reloading the page was the normal behavior when you needed server-sided languages to do basic form manipulation before JavaScript became a powerful language.
Because the form is not directly connected to a state that changes the event, you can omit the arrow function to pass the event like in the input field.
value that receives the state.onChange that runs an arrow function each time the user types inside the field.events:
- The input event fired each time the user types.
- The same event passed as an argument to be used in a function.
Now we are halfway done in React. The next day, we will start building large-scale applications by fetching data from a server and handling multiple pages inside our React project.
You can take a break before moving to the articles intended for the next day, or click here to continue your studies.
If you want to see the finished code, open this link and open the branch forms.
Cover: Photo by Kelly Sikkema on Unsplash