Gutenberg Sidebar Show input field on Toggle

In recent days I have tried to learn about Gutenberg, React, ES5, ES6, Babel, Webpack JSX. I have to say it feels like I dived into a kind of worm hole … The only thing I wanted was to add a toggle and an input field to the sidebar and I have been working this working through the sidebar Girub. And This tutorial

What I can’t figure out is How you can hide the input field in the first instance and then display it when the switch is switched on.

I just did this with CSS and set it up display:none; And then switch it on with Jquery.

I have read that it is better not to do this and instead make the input field when the switch is switched on.

I have read other questions about this subject, such as this One at Stackoverflow, but because the aforementioned tutorial (WordPress Github) does not use JSX, I am not sure how to translate the answers given.

I really just take baby steps here … so I would like to find a solution that is close to what I am used to with JQuery.

sidebar_wordpress.css

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

sidebar_wordpress.js

( function( wp ) {
    var registerPlugin  = wp.plugins.registerPlugin;
    var PluginSidebar   = wp.editPost.PluginSidebar;
    var el              = wp.element.createElement;
    var Textinput       = wp.components.TextControl;
    var Toggleinput     = wp.components.ToggleControl;
    var withSelect      = wp.data.withSelect;
    var withDispatch    = wp.data.withDispatch;
    var compose         = wp.compose.compose;

    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 ],
            }
        } )
    )( function( props ) {
        return el( Textinput, {
            label: 'keywords :',
            value: props.metaFieldValue,
            onChange: function( content ) {
                props.setMetaFieldValue( content );
            },
        } );
    } );

    
    var MetaBlockToggle = 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 ],
            }
        } )
    )( function( props ) {
        return el( Toggleinput, {
            label: 'use keywords?',
            checked: props.metaFieldValue,
            onChange: function( content ) {
                props.setMetaFieldValue( content );
            },
        } );
    } );

    
    registerPlugin( 'my-plugin-sidebar', {
        render: function() {
            return el( PluginSidebar,
                {
                    name: 'my-plugin-sidebar',
                    icon: 'admin-post',
                    title: 'Here is my title',
                },
                el( 'div',
                    { className: 'dev-sidebar-toggle' },
                    el( MetaBlockToggle,
                        { fieldName: 'sidebar_toggle_field' }
                    ),
                ),
                el( 'div',
                    { className: 'dev-sidebar-keywords' },
                    el( MetaBlockField,
                        { fieldName: 'sidebar_input_field' }
                    )
                )
            );
        }
    } );
} )( window.wp );

Funnies.php

function sidebar_plugin_register() {
    wp_register_script(
        'plugin-sidebar-js',
        get_stylesheet_directory_uri() . '/sidebar_wordpress.js',
        array(
            'wp-plugins',
            'wp-edit-post',
            'wp-element',
            'wp-components',
            'wp-data',
            'wp-compose',
        )
    );
    wp_register_style(
        'plugin-sidebar-css',
        get_stylesheet_directory_uri() . '/sidebar_wordpress.css'
    );

    register_post_meta( 'post', 'sidebar_input_field', array(
    'show_in_rest' => true,
    'single' => true,
    'type' => 'string',
    ) );

    register_post_meta( 'post', 'sidebar_toggle_field', array(
        'type'      => 'boolean', // because it is a toggle
        'single'    => true,
        'show_in_rest'  => true,
    ) );
}
add_action( 'init', 'sidebar_plugin_register' );

function sidebar_plugin_script_enqueue() {
    wp_enqueue_script( 'plugin-sidebar-js' );
}
add_action( 'enqueue_block_editor_assets', 'sidebar_plugin_script_enqueue' );

function sidebar_plugin_style_enqueue() {
    wp_enqueue_style( 'plugin-sidebar-css' );
}
add_action( 'enqueue_block_assets', 'sidebar_plugin_style_enqueue' );