How to pass values from a component into Formik multi-step form wizard?

Question

As the title said. I have a stateless component based on react-bootstrap-typeahead and a form wizard based on the formik multi-step wizard example found in the

Answer 1

Formik author here...

In the example, the component renders so the setFieldValue in your FormElements function is not actually in the correct scope. If you need access to setFieldValue within one of your wizard's pages, you can get it out of a custom , using connect() higher order component with a custom component, or directly from Formik context using render prop.

My suggestion would be to use Formik's component with a render prop like so:

const FormElements = () => (
   {
      sleep(300).then(() => {
        window.alert(JSON.stringify(values, null, 2));
        actions.setSubmitting(false);
      });
    }}
  >
    
      
        {({ field, form }) => (
           {
              console.log('I got the value correctly from my child: ', location);               
              // Manually set Formik values.location and trigger validation
              form.setFieldValue('location', location);
            }}
          />
        )}
      
    
  
);