Show a div while checked is on true, Custom Gutenberg Block

Question

I a clue to show a div whenever the user check an input with the type of checkbox.

To see the behavior i'm waiting for, i share you a screenshot of what the display looks like.

So as you can see i want to show a div with the possibility to add a link in an input.

Here is the associated code :

const {registerBlockType} = wp.blocks
const {InspectorControls, InnerBlocks} = wp.editor
const {RichText} = wp.blockEditor
import { useState } from '@wordpress/element';

registerBlockType('astra/listedosage', {
    title: 'Liste dosage ingrédients',
    category: 'widgets',
    icon: 'smiley',
    attributes: {
        Ingname: {type: "string"},
        Qtt: {type: "string"},
    },
    edit: function(props) {
        const ALLOWED_BLOCKS = ['astra/listedosage'];
        const [checked, setChecked] = useState(false);

        const handleChange = () => {
          // Change state to the opposite (to ture) when checkbox changes
          setChecked(!checked);
        };

        function updateIngname(e){
            props.setAttributes({Ingname : e.target.value})
        }
        function updateQtt(e){
            props.setAttributes({Qtt : e.target.value})
        }
        function updateLink(e){
            props.setAttributes({Link : e.target.value})
        }
        
        return (
            <div className="blocListeDosage">

                   <div className="blocListeDosageIngName">
                       <input type="text" autocomplete="off" placeholder="Nom de l'ingrédient" onChange={updateIngname} value={props.attributes.Ingname} />
                   </div>

                   <div className="blocListeDosageLink">
                       <div>Lien ?</div>
                       <input type="checkbox" checked={checked} onChange={handleChange}/>
                   </div>

                   <div className="blocListeDosageIngQtt">
                       <input type="text" autocomplete="off" placeholder="Quantité" onChange={updateQtt} value={props.attributes.Qtt} />
                   </div> 
                   
{ checked && ( 
                   <div className="blocListeDosageLinkHover">
                       <input type="text" autocomplete="off" placeholder="Lien vers le produit"  onChange={updateLink} value={props.attributes.Link} />
                   </div>
)}
            </div>
        )
    },
    save: function (props) {
        return (
            <div className="blocListeDosage">
                   
            </div>
        )
    }
})

Answer 1

For people that will have my problem in their development of Gutenberg block : Use CSS input:checked and ~ tag, i wasn't able to do it with reactJS, every thing i've been trying wasn't a success since i never had an answer.

edit: function(props) {
        const ALLOWED_BLOCKS = ['astra/listedosage'];

        function updateIngname(e){
            props.setAttributes({Ingname : e.target.value})
        }
        function updateQtt(e){
            props.setAttributes({Qtt : e.target.value})
        }
        function updateLink(e){
            props.setAttributes({Link : e.target.value})
        }
        return (
            <div className="blocListeDosage">

                   <div className="blocListeDosageIngName">
                       <input type="text" autocomplete="off" placeholder="Nom de l'ingrédient" onChange={updateIngname} value={props.attributes.Ingname} />
                   </div>

                   <div className="blocListeDosageLink">
                       <div>Lien ?</div>
                       <input type="checkbox"/>
                       <div className="blocListeDosageLinkHover">
                            <input type="text" autocomplete="off" placeholder="Lien vers le produit"  onChange={updateLink} value={props.attributes.Link} />
                       </div>
                   </div>

                   <div className="blocListeDosageIngQtt">
                       <input type="text" autocomplete="off" placeholder="Quantité" onChange={updateQtt} value={props.attributes.Qtt} />
                   </div> 
                   
            </div>
        )
    }

CSS is here:

input:checked + .blocListeDosageLinkHover{
    display: block!important;
}