Basic-render-props.jsx

const Basic = () => 
  <div>
    <h1>My Form</h1>
    <p>This can be anywhere in your application</p>
    <Formik
      initialValues={{ email: '',  password: '' }} 
      validate={values => { /* omitted for brevity */ }}
      onSubmit={values => { /* omitted for brevity */ }}
      render={({ values, errors, touched, handleChange, handleSubmit, isSubmitting }) =>
        <form onSubmit={handleSubmit}>
          <input
            type="email"
            name="email"
            onChange={handleChange}
            value={values.email}
          />
          {touched.email && errors.email && <div>{errors.email}</div>}
          <input
            type="password"
            name="password"
            onChange={handleChange}
            value={values.password}
          />
          {touched.password && errors.password && <div>{errors.password}</div>}
          <button type="submit" disabled={isSubmitting}>Submit</button>
        </form>}
    />
  </div>