Runtime error with Checkbox and Material-UI v4

Just a heads-up. This may be due to changes in Material-UI v4 alpha.

The following:

<Field
  Label={{ label: 'Do you confirm?" }}
  name='confirmation'
  component={CheckboxWithLabel}
  color='primary'
/>

At runtime was causing:

Warning: Failed prop type: Invalid prop `checked` of type `string` supplied to `ForwardRef(Checkbox)`, expected `boolean`.
    in ForwardRef(Checkbox) (created by WithStyles(ForwardRef(Checkbox)))
    in WithStyles(ForwardRef(Checkbox)) (created by FormikMaterialUICheckboxWithLabel)
    in label (created by ForwardRef(FormControlLabel))
    in ForwardRef(FormControlLabel) (created by Context.Consumer)
    in WithFormControlContext(ForwardRef(FormControlLabel)) (created by WithStyles(WithFormControlContext(ForwardRef(FormControlLabel))))
    in WithStyles(WithFormControlContext(ForwardRef(FormControlLabel))) (created by FormikMaterialUICheckboxWithLabel)

Changing this:

https://github.com/stackworx/formik-material-ui/blob/8d8b6abf18e6ce9f95020eb6f9ce9f9c6b6b8e10/src/Checkbox.tsx#L26

To:

    checked: field.value

That is, leaving the boolean value alone, not converting it to string, fixed it.

[cliedeman]

I think we should only merge the PR when 4 is released as we should bump the peer dependency 4.0 >=.

In the meantime you can use this:

import {
  Checkbox as MuiCheckbox,
} from '@material-ui/core';
import {
  CheckboxProps,
  fieldToCheckbox,
} from 'formik-material-ui';


const Mui4Checkbox = (props: CheckboxProps) => {
  return (
    <MuiCheckbox {...fieldToCheckbox(props)} checked={props.field.value} />
  );
};

[johnraz]

I couldn’t find a PR so I went ahead an created it here: #75