import React from 'react';
import { Formik, Field, Form } from 'formik';
import FormikObserver from 'formik-observer';

export const Signup = () => (
  <div>
    <h1>My Cool Persisted Form</h1>
    <Formik
      onSubmit={values => console.log(values)}
      initialValues={{ firstName: '', lastName: '', email: '' }}
    >
      {props => (
        <Form className="whatever">
          <Field name="firstName" placeholder="First Name" />
          <Field name="lastName" placeholder="Last Name" />
          <Field name="email" type="email" placeholder="Email Address" />
          <button type="submit">Submit</button>
          <FormikObserver
            onChange={({ values }) => console.log('onchange', values)}
          />
        </Form>
      )}
    </Formik>
  </div>
);