example of wizard page with formik

NewStep.jsx

import React from 'react';
import PropTypes from 'prop-types';
import { Formik } from 'formik';
import { TextInput, Label } from '@trussworks/react-uswds';

import ConnectedWizardPage from 'shared/WizardPage';

const NewStep = (props) => {
  const { title, description, pageList, pageKey } = props;

  const mySubmit = (values) => {
    console.log('handle submit!', values);
  };

  return (
    <Formik initialValues={{ myName: '', otherInput: '' }} onSubmit={mySubmit}>
      {({ handleChange, handleSubmit, values, isSubmitting }) => (
        <ConnectedWizardPage
          onNextPageClick={handleSubmit}
          handleSubmit={() => undefined}
          pageList={pageList}
          pageKey={pageKey}
        >
          <div className="Todo-phase2">
            <h1>Placeholder for {title}</h1>
            <h2>{description}</h2>

            <form onSubmit={handleSubmit}>
              {values.myName}
              <Label hint=" (optional)" htmlFor="title">
                My Test Input
              </Label>
              <TextInput id="myName" name="myName" onChange={handleChange} />

              {values.myName && <TextInput id="otherInput" name="otherInput" />}
            </form>
          </div>
        </ConnectedWizardPage>
      )}
    </Formik>
  );
};

NewStep.propTypes = {
  title: PropTypes.node.isRequired,
  description: PropTypes.node.isRequired,
  // eslint-disable-next-line react/forbid-prop-types
  pageList: PropTypes.array.isRequired,
  pageKey: PropTypes.string.isRequired,
};

export default NewStep;