Passing children to withFormik component triggers warning

I’ve just ran into a small problem with an warning triggered when using withFormik on a component that receives children as a prop.

Warning: You should not use <Formik render> and <Formik children> in the same <Formik> component; <Formik children> will be ignored

My use case is a generic confirm page, where the children passed in will be rendered inside a container, with a checkbox and confirm button underneath:

import React = require('react')

import { FormikProps, FormikBag, withFormik } from 'formik'

import Checkbox from '../components/checkbox'
import { FormikContainer, CancelButton, SubmitButton, P } from '../components/layout'

interface ConfirmPageProps {
  confirmText: string
  loadingText: string
  submitTitle: string

  children?: React.ReactNode

  onCancel: () => void
  onConfirm: () => void
}

interface ConfirmFormValues {
  understood: boolean
}

function mapPropsToValues () {
  return { understood: false } as ConfirmFormValues
}

function handleSubmit ({}: ConfirmFormValues, { props }: FormikBag<ConfirmPageProps, ConfirmFormValues>) {
  props.onConfirm()
}

function render ({ values, isSubmitting, ...props }: ConfirmPageProps & FormikProps<ConfirmFormValues>) {
  return (
    <FormikContainer maxWidth='320px' justifyContent='center'>
      {props.children}

      <P>
        <Checkbox name='understood' label={props.confirmText} />
      </P>

      <P textAlign='center'>
        {isSubmitting && props.loadingText}
        {isSubmitting || <SubmitButton title={props.submitTitle} disabled={!values.understood} />}
        {isSubmitting || <br />}
        {isSubmitting || <CancelButton title='Cancel' onClick={props.onCancel} />}
      </P>
    </FormikContainer>
  )
}

export default withFormik({ mapPropsToValues, handleSubmit })(render)

[jaredpalmer]

Children must be a fn

[LinusU]

@jaredpalmer I’m not sure what you mean by “Children must be a fn”

The problem here is that I have built a React Component using withFormik, and that component in itself accepts a children parameter from whoever is using this component.

Thus I’m not trying to pass children at all to formik, but just want the consumers of my component to pass children to me