Debug Formik

Debug.js

import React from 'react';
import {FormikConsumer} from 'formik';

export const Debug = () => (
    <div
        style={{
            background: '#f6f8fa',
            borderRadius: 4,
            boxShadow: '0 0 1px  #eee inset',
            margin: '3rem 0'
        }}
    >
        <div
            style={{
                background: '#555',
                borderTopLeftRadius: 4,
                borderTopRightRadius: 4,
                color: '#fff',
                fontSize: 11,
                fontWeight: 500,
                letterSpacing: '1px',
                padding: '.5rem',
                textTransform: 'uppercase'
            }}
        >
            {'Formik State'}
        </div>
        <FormikConsumer>
            {({validationSchema, validate, onSubmit, ...rest}) => (
                <pre
                    style={{
                        fontSize: '.65rem',
                        overflowX: 'scroll',
                        padding: '.25rem .5rem'
                    }}
                >
                    {JSON.stringify(rest, null, 2)}
                </pre>
            )}
        </FormikConsumer>
    </div>
);