How do I handle errors in React TypeScript forms?

How do I handle errors in React TypeScript forms?

You can handle errors in React TypeScript forms by using state to track errors and displaying them conditionally.

Can you show me a code example?

Sure! You can use a state object to manage form values and errors. Here's a simple example:

const [formData, setFormData] = useState({ name: '', email: '' });
const [errors, setErrors] = useState({ name: '', email: '' });

const handleSubmit = (e: React.FormEvent) => {
  e.preventDefault();
  let newErrors = { name: '', email: '' };

  if (!formData.name) {
    newErrors.name = 'Name is required';
  }
  if (!formData.email) {
    newErrors.email = 'Email is required';
  }

  setErrors(newErrors);

  if (!newErrors.name && !newErrors.email) {
    // Submit form
  }
};

This code checks for empty fields and sets error messages accordingly.

What if I want to validate the email format?

You can use a regular expression to validate the email format. Update the handleSubmit function like this:

if (formData.email && !/[A-Z0-9._%+-]+@[A-Z0-9.-]+".[A-Z]{2,}/i.test(formData.email)) {
  newErrors.email = 'Email is invalid';
}

This will check if the email matches a standard format.

Thanks! This is really helpful.

You're welcome! If you have any more questions about React or TypeScript, feel free to ask!