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

formik using context api

syed ameer answered on December 18, 2022 Popularity 7/10 Helpfulness 4/10

answer formik using context api

formik using context api

Comment

import React from 'react';
2 import { useFormikContext, Formik, Form, Field } from 'formik';
3 
4 const AutoSubmitToken = () => {
5   // Grab values and submitForm from context
6   const { values, submitForm } = useFormikContext();
7   React.useEffect(() => {
8     // Submit the form imperatively as an effect as soon as form values.token are 6 digits long
9     if (values.token.length === 6) {
10       submitForm();
11     }
12   }, [values, submitForm]);
13   return null;
14 };
15 
16 const TwoFactorVerificationForm = () => (
17   <div>
18     <h1>2-step Verification</h1>
19     <p>Please enter the 6 digit code sent to your device</p>
20     <Formik
21       initialValues={{ token: '' }}
22       validate={values => {
23         const errors = {};
24         if (values.token.length < 5) {
25           errors.token = 'Invalid code. Too short.';
26         }
27         return errors;
28       }}
29       onSubmit={(values, actions) => {
30         setTimeout(() => {
31           alert(JSON.stringify(values, null, 2));
32           actions.setSubmitting(false);
33         }, 1000);
34       }}
35     >
36       <Form>
37         <Field name="token" type="tel" />
38         <AutoSubmitToken />
39       </Form>
40     </Formik>
41   </div>
42 );

Popularity 7/10 Helpfulness 4/10 Language whatever

Source: formik.org

Tags: api formik using whatever

Link to this answer
Share Copy Link

Contributed on Dec 18 2022

syed ameer

0 Answers Avg Quality 2/10

formik using context api

Contents

More Related Answers

formik using context api

Grepper

Documentation

Social

Legal

Contact

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