How can I implement form validation in React with TypeScript?

How can I implement form validation in React with TypeScript?

You can use libraries like Formik or React Hook Form for form validation in React with TypeScript. They provide built-in validation methods.

Can you show me an example using React Hook Form?

Sure! First, install React Hook Form: npm install react-hook-form. Then, you can create a form like this:

import { useForm } from 'react-hook-form';

const MyForm = () => {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = data => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('name', { required: true })} />
      {errors.name && <span>This field is required</span>}
      <input type="submit" />
    </form>
  );
};

This will validate that the name field is required.

What if I want to add more complex validation rules?

You can add more complex validation rules by using the validate option in the register method. For example:

<input {...register('age', { 
  required: true, 
  validate: value => value > 18 || 'You must be at least 18 years old' 
})} />

Are there any other libraries you recommend for validation?

Yes, besides React Hook Form, you can also consider using Yup for schema validation, which works well with both Formik and React Hook Form.