How do I handle forms in React using TypeScript?

How do I handle forms in React using TypeScript?

You can handle forms in React with TypeScript by defining interfaces for your form data and using controlled components.

Can you show me an example of a controlled component?

Sure! Here's a simple example:

import React, { useState } from 'react';

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

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

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

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    console.log(formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" value={formData.name} onChange={handleChange} />
      <input type="email" name="email" value={formData.email} onChange={handleChange} />
      <button type="submit">Submit</button>
    </form>
  );
};

This code defines a form with controlled inputs for name and email.

What if I want to add validation to the form?

You can add validation by checking the form data before submission. You might use libraries like Formik or React Hook Form for more complex validation.