Form Submission

Handling form submission in a React functional component with TypeScript involves several steps: setting up the form, managing state, handling the form submission event, and applying type annotations. Here's a step-by-step guide,
i) Step-by-Step Guide
Set Up the Form: Define a simple form with inputs.
Manage State: Use the useState hook to manage form data.
Handle Form Submission: Define a function to handle the form submission event.
Type Annotations: Use TypeScript to type your state and event handlers.
Define Types for Form Data: Define an interface to type your form data.

interface FormData {
  name: string;
  email: string;
}

Set Up the Component: Set up your component with useState for managing form data.

import React, { useState, ChangeEvent, FormEvent } from 'react';

const App: React.FC = () => {
  const [formData, setFormData] = useState<FormData>({ name: '', email: '' });

  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setFormData(prevState => ({
      ...prevState,
      [name]: value,
    }));
  };

  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    console.log('Form data submitted:', formData);
    // Here you can handle the form submission, e.g., send the data to a server.
  };

  return (
    <div>
      <h1>Form Submission</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label>
            Name:
            <input
              type="text"
              name="name"
              value={formData.name}
              onChange={handleInputChange}
            />
          </label>
        </div>
        <div>
          <label>
            Email:
            <input
              type="email"
              name="email"
              value={formData.email}
              onChange={handleInputChange}
            />
          </label>
        </div>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

export default App;

ii) Detailed Explanation
Interface for Form Data: The FormData interface defines the structure of the form data, ensuring type safety.

interface FormData {
  name: string;
  email: string;
}

Component Setup: The App component uses the useState hook to manage the form data.

const [formData, setFormData] = useState<FormData>({ name: '', email: '' });

Input Change Handler: The handleInputChange function updates the state when the input values change. The ChangeEvent<HTMLInputElement> type ensures the event is properly typed.

const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
  const { name, value } = e.target;
  setFormData(prevState => ({
    ...prevState,
    [name]: value,
  }));
};

Form Submission Handler: The handleSubmit function prevents the default form submission behavior and logs the form data. The FormEvent<HTMLFormElement> type ensures the event is properly typed.

const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
  e.preventDefault();
  console.log('Form data submitted:', formData);
  // Here you can handle the form submission, e.g., send the data to a server.
};

Form JSX: The form uses the handleInputChange function to update the state and the handleSubmit function to handle form submission.

return (
  <div>
    <h1>Form Submission</h1>
    <form onSubmit={handleSubmit}>
      <div>
        <label>
          Name:
          <input
            type="text"
            name="name"
            value={formData.name}
            onChange={handleInputChange}
          />
        </label>
      </div>
      <div>
        <label>
          Email:
          <input
            type="email"
            name="email"
            value={formData.email}
            onChange={handleInputChange}
          />
        </label>
      </div>
      <button type="submit">Submit</button>
    </form>
  </div>
);