A Simple Form

Key Concepts and Functions:

1. useState:

   • The useState hook is used to create and manage the state of the form data (formData). It initializes the state with default values.

2. handleChange Function:

   • The handleChange function is called whenever there is a change in any form input. It updates the corresponding piece of state in the formData.

3. handleSubmit Function:

   • The handleSubmit function is triggered when the form is submitted. In this example, it prevents the default form submission behavior and logs the form data to the console. In a real application, you might send this data to a server.

4. Event Handlers:

   • The onChange event is used to trigger the handleChange function when the user types into any form input.
   • The onSubmit event is used to trigger the handleSubmit function when the form is submitted.

5. Input Elements:

   • Input elements (<input>) are used to collect user data. The value attribute is set to the corresponding piece of state, and the onChange attribute is set to the handleChange function.

Imagine a form where someone can enter their email address. In React, we use a function called useState to keep track of what the user types.

Here's the example of form that receive user email

//

 Imagine

this is a file named SimpleForm.js import React, { useState } from 'react'; function SimpleForm() { // This line sets up a piece of memory to remember the email address const [email, setEmail] = useState(''); // This function is called whenever someone types something in const handleChange = (event) => { // This line updates the memory with what the person typed setEmail(event.target.value); }; // This function is called when the form is submitted const handleSubmit = (event) => { // This line prevents the form from doing its usual browser stuff event.preventDefault(); // Now you can do something with the email, like showing it on the screen console.log('Email submitted:', email); }; // This is what the form looks like return ( <form onSubmit={handleSubmit}> <label> Email: {/* This input field gets its value from the memory */} <input type="text" value={email} onChange={handleChange} /> </label> {/* This button triggers the form submission */} <button type="submit">Submit</button> </form> ); } export default SimpleForm;

Here's the result looks like

---

Here's the good video to show complete tutorial on React Form Click here