Gutenberg Block checkbox check-unckeck does not work

I have added the custom Gutenberg block for my shortcode, but in checkbox control check uncheck does not work, please check code done as below:

el( components.CheckboxControl, {
    label: i18n.__( 'Display it?', 'txt-domain' ),
    checked: props.attributes.myAttr,
    onChange: function( val ) {
        if( val ) {
            props.setAttributes({ myAttr: '1' })
        } else {
            props.setAttributes({ myAttr: '0' })
        }
    }
} ),

if I remove the checked: props.attributes.myAttr, then it works fine but here, checkbox does not stay checked or uncheck. by the way it saves the value.

I have added the custom Gutenberg block for my shortcode, but in checkbox control check uncheck does not work, please check code done as below:

el( components.CheckboxControl, {
    label: i18n.__( 'Display it?', 'txt-domain' ),
    checked: props.attributes.myAttr,
    onChange: function( val ) {
        if( val ) {
            props.setAttributes({ myAttr: '1' })
        } else {
            props.setAttributes({ myAttr: '0' })
        }
    }
} ),

if I remove the checked: props.attributes.myAttr, then it works fine but here, checkbox does not stay checked or uncheck. by the way it saves the value.

• block-editor

Share Improve this question edited Feb 16, 2019 at 11:50 fuxia♦ 107k3939 gold badges255255 silver badges461461 bronze badges asked Feb 16, 2019 at 11:19 Jaydip NimavatJaydip Nimavat 22444 silver badges1010 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

The property checked expects boolean value. (CheckboxControl)
How did you define myAttr in attributes? If you set myAttr to '1' or '0' it is both true.
Try empty instead of '0' props.setAttributes({ myAttr: '' }) or false.

Try using the withState wrapper like in the example from the docs : https://wordpress/gutenberg/handbook/designers-developers/developers/components/checkbox-control/