Breaking News: Grepper is joining You.com. Read the official announcement!

formik provider

Mystic Dev answered on February 23, 2022 Popularity 7/10 Helpfulness 6/10

answer formik provider

formik provider

Comment

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;

Popularity 7/10 Helpfulness 6/10 Language javascript

Source: Grepper

Tags: formik javascript provider

Link to this answer
Share Copy Link

Contributed on Feb 23 2022

Mystic Dev

0 Answers Avg Quality 2/10

formik provider

Contents

More Related Answers

formik provider

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.