“Penyedia Formik” Kode Jawaban

Penyedia Formik

type Props = {
};
const FormUseFormik = (props: Props) => {
  const { enqueueSnackbar } = useSnackbar();

  const onSubmit = (values) => {
    enqueueSnackbar(`submit:  ${JSON.stringify(values)}`, {
      preventDuplicate: true,
      persist: false,
    });
  };

  const formikbag = useFormik<Values>({
    initialValues: {
      email: '',
      password: '',
    },
    onSubmit,
  });

  const { values, setFieldValue, handleSubmit } = formikbag;

  return (
    <Flex flex={1}>
      <Card width={800}>
        <Text mb={20}>Simple Formik</Text>
        <FormikProvider value={formikbag}>
          <Flex flexDirection='column'>
            <TextField
              placeholder='email'
              mb={20}
              value={values.email}
              onChange={(e) => setFieldValue('email', e.target.value)}
            />
            <TextField
              type='password'
              placeholder='password'
              mb={20}
              value={values.password}
              onChange={(e) => setFieldValue('password', e.target.value)}
            />
          </Flex>
          <Button
            type='submit'
            onClick={handleSubmit}
            >
            Submit
          </Button>
        </FormikProvider>
      </Card>
    </Flex>
  )
};

export default FormUseFormik;