exemplo de formulario usando reactJS, Typescript, formik, yup

FormComponent.jsx

// FormComponent.jsx

import React, { useState } from 'react';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';
import { useFormik } from 'formik';
import * as yup from 'yup';

const validationSchema = yup.object({
  email: yup.string().email('Digite um email válido').required('Email é obrigatório'),
  subject: yup.string().required('Assunto é obrigatório'),
  message: yup.string().required('Mensagem é obrigatória'),
});

const FormComponent = () => {
  const formik = useFormik({
    initialValues: {
      email: '',
      subject: '',
      message: '',
    },
    validationSchema: validationSchema,
    onSubmit: (values) => {
      // Aqui você pode enviar os dados para o servidor
      console.log(values);
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <TextField
        fullWidth
        id="email"
        name="email"
        label="Email"
        value={formik.values.email}
        onChange={formik.handleChange}
        onBlur={formik.handleBlur}
        error={formik.touched.email && Boolean(formik.errors.email)}
        helperText={formik.touched.email && formik.errors.email}
      />
      <TextField
        fullWidth
        id="subject"
        name="subject"
        label="Assunto"
        value={formik.values.subject}
        onChange={formik.handleChange}
        onBlur={formik.handleBlur}
        error={formik.touched.subject && Boolean(formik.errors.subject)}
        helperText={formik.touched.subject && formik.errors.subject}
      />
      <TextField
        fullWidth
        multiline
        rows={4}
        id="message"
        name="message"
        label="Mensagem"
        value={formik.values.message}
        onChange={formik.handleChange}
        onBlur={formik.handleBlur}
        error={formik.touched.message && Boolean(formik.errors.message)}
        helperText={formik.touched.message && formik.errors.message}
      />
      <Button type="submit" variant="contained" color="primary">
        Enviar
      </Button>
    </form>
  );
};

export default FormComponent;

// by CHATGPT

{/*
busque artigos que ensinam como escrevar um formulario considerando boas praticas de programacao usando reactJS, typescript, @mui v5, faz uma lista de pelo menos 3 artigos que ensinem como fazer.
Com base em seus conhecimentos mostre as melhores praticas de se fazer um formulario usando reactJs + typescript + @mui, acrescente outras tecnologias que voce julgar necessario para aprimorar o formulario
cite os artigos que voce usar de referencia, escreva o componente em .jsx, adicione tratamento de erro nos campos de formulario, considere o campo de email , assunto e messagem
*/}