How do I create forms in React using TypeScript?

How do I create forms in React using TypeScript?

To create forms in React with TypeScript, you can use controlled components. Start by defining your form state using the useState hook.

Can you show me a simple example?

Sure! Here's a basic example:

import React, { useState } from 'react';

const MyForm: React.FC = () => {
    const [formData, setFormData] = useState<{ name: string; email: string }>({ 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} placeholder="Name" />
            <input type="email" name="email" value={formData.email} onChange={handleChange} placeholder="Email" />
            <button type="submit">Submit</button>
        </form>
    );
};

export default MyForm;

What about form validation?

For form validation, you can use libraries like Formik or React Hook Form. They provide built-in validation methods and are easy to integrate with TypeScript.