In our Redux Form 5.3 (not 6.x) app, I want to render an <input type="checkbox" /> like so:
// In some cases, fieldHelper.checked is initially undefined. Then, when the
// user clicks one of the checkboxes, fieldHelper.checked is
// explicitly set to true or false. This change from one of the component's
// props being undefined to having a value causes a React warning; see
// http://stackoverflow.com/a/38015169/473792 and
// https://facebook.github.io/react/docs/forms.html#controlled-components
// So to prevent that warning, we do a quick null check on
// fieldHelper.checked and replace it with false explicitly if it is
// undefined before rendering the checkbox.
const fieldHelper = this.props.field['checkbox'];
const checked = fieldHelper.checked || false;
const modifiedFieldHelper = Object.assign({}, fieldHelper);
delete modifiedFieldHelper.checked;
return (
<input
checked={checked}
{...modifiedFieldHelper}
/>
);
}
As noted in the comment, in my testing environment, this.props.field['checkbox'].checked is undefined immediately after mounting the <input>. As a result, when my tests modify the value of this.props.field['checkbox'].checked, I get the following warning:
Warning: ApplicantForm is changing an uncontrolled input of type checkbox to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.
... Unless I explicitly set the checked prop on the <input> to false instead of undefined, as demonstrated in the code snippet I posted above.
Instead of using this null check, I would like to set the initial value of this.props.fields['checkbox'].checked before my tests run. I know I can set the initial value of fields in Redux Form. Is there a way to set the initial value of an auxiliary property like the checked property that Redux Form also controls?
You could create a simple conditional in your checked attribute so that when the value is undefined you just return false:
<input
type="checkbox"
checked={typeof this.props.fields['checkbox'].checked == 'undefined'?false:this.props.fields['checkbox'].checked}
onClick={() => {... your onClick code ...}} />
Checkboxes are no different from text inputs. You can still just destructure the field object into your <input>. See how the employed value is used in the v5.3.3 Simple Form Example.
<input type="checkbox" {...myField}/>
Redux Form will detect that it's a checkbox (really it detects for boolean values) and use the checked prop.
I've never used Redux-Form but to display the default checked value for a checkbox in default React you'll need to use the defaultChecked attribute. It accepts a boolean.
<input type="checkbox" defaultChecked={/*bool*/} />