Gutenberg sidebar show input field on toggle

So meanwhile I have learned some more about React and Gutenberg and the answer was really simple. There are better ways but show and hiding with CSS works. So it’s a first step in the right direction I think.

get the status of the toggle in the withSelect part of the input field,

checkToggle : select( 'core/editor' ).getEditedPostAttribute( 'meta' )[ 'sidebar_toggle_field' ],

then set the className accordingly,

className: props.checkToggle ? ('dev-sidebar-keywords-show') : ('dev-sidebar-keywords-hide'),

..dev-sidebar-toggle{
    padding:15px;
}
.dev-sidebar-keywords-show{
    display: block;
    padding: 15px;
}
.dev-sidebar-keywords-hide{
    display: none;
    padding: 15px;
}

var MetaBlockField = compose(
        withDispatch( function( dispatch, props ) {
            return {
                setMetaFieldValue: function( value ) {
                    dispatch( 'core/editor' ).editPost(
                        { meta: { [ props.fieldName ]: value } }
                    );
                }
            }
        } ),
        withSelect( function( select, props ) {
            return {
                metaFieldValue: select( 'core/editor' ).getEditedPostAttribute('meta' )[ props.fieldName ],
                checkToggle : select( 'core/editor' ).getEditedPostAttribute( 'meta' )[ 'sidebar_toggle_field' ],
            }
        } )
    )( function( props ) {
        return el( Textinput, {
            label: 'keywords :',
            value: props.metaFieldValue,
            className: props.checkToggle ? ('dev-sidebar-keywords-show') : ('dev-sidebar-keywords-hide'),
            onChange: function( content ) {
                props.setMetaFieldValue( content );
            },
        } );
    } );