How can I use TypeScript with React forms?

How can I use TypeScript with React forms?

You can use TypeScript with React forms by defining types for your form data and using them in your components.

Can you show me an example of a form 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 name="name" value={formData.name} onChange={handleChange} />
      <input name="email" value={formData.email} onChange={handleChange} />
      <button type="submit">Submit</button>
    </form>
  );
};

This defines a form with name and email fields.

What about form validation?

For form validation, you can use libraries like Formik or React Hook Form, which work well with TypeScript. They provide built-in validation methods and type safety.