Handling onSubmit outside of formik

Question

I'm trying to extract values from a form constructed with Formik, however I can't seem to get these form values out of formik via the onSubmit call. What's the best way to get his out and handle it on a parent component?

This is the form component

import React from 'react';
import { Formik, Form, Field } from 'formik';
import * as Yup from 'yup';
import moment from 'moment';
import Header from './Header';

moment.locale('en-gb');

const JoinForm = (props) => {
    const initialValues = {
        firstName: props.firstName || 'test'
    };


return (
    <div>

        <Formik
            initialValues={initialValues}
            onSubmit={props.onSubmit}

            // onSubmit={(values, actions) => {
            //     //console.log('this is direct from form',values)
            //     actions.setSubmitting(false);
            //     return values;
            // }}

        >
            {props => {
                const {
                    values,
                    touched,
                    isSubmitting,
                    handleChange,
                    handleSubmit,
                    handleReset,
                    handleBlur
                } = props;
                return (
                    <Form>
                        <label>First Name </label>
                        <Field
                            type="text"
                            name="firstName"
                            placeholder="First Name"
                            values={values.firstName}
                            onChange={handleChange}
                            onBlur={handleBlur}
                        />

                        <button
                            type="button"
                            type="submit"
                            disabled={!!isSubmitting}
                        >
                            Submit
                        </button>
                    </Form>

                );
            }}
        </Formik>

    </div>

);
};

export default JoinForm;

This is the parent component

import JoinForm from './JoinForm';
import React from 'react';
import Header from './Header';
import { startAddAthlete } from '../actions/form';

class JoinPage extends React.Component{
    onSubmit = (athlete) => {
        console.log(athlete);

    };

    render() {
                return (
                    <div>
                        <Header />
                        <JoinForm firstName={'King'} onSubmit={this.onSubmit} />
                    </div>
                );
    }

}


export default JoinPage

Am I doing this correctly? The purpose is to let the parent handle the submission and as the form is supposed to be re-usable for edits, etc

Answer 1

I think, your button is causing this issue. You've added both type="button" and type="submit" on the button. Removing the type="button" should fix this.

<button type="submit" 
        disabled={!!isSubmitting}>
        Submit
</button>

Hope this will help.