How can I create forms in React using TypeScript and custom hooks?

How can I create forms in React using TypeScript and custom hooks?

You can create forms in React with TypeScript by defining your form state and handlers using custom hooks. Would you like a code example?

Yes, please provide a code example!

Here's a simple example:

import React, { useState } from 'react';

function useForm(initialValues: any) {
    const [values, setValues] = useState(initialValues);

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

    return { values, handleChange };
}

const MyForm: React.FC = () => {
    const { values, handleChange } = useForm({ name: '', email: '' });

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

This code defines a custom hook useForm to manage form state.

How do I handle form submission with this setup?

You can handle form submission by adding an onSubmit handler to your form. Here's how you can modify the MyForm component:

const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    console.log(values); // Process your form values here
};

return (
    <form onSubmit={handleSubmit}>
        {/* input fields */}
    </form>
);

This prevents the default form submission and allows you to process the values.