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;