title: Show a div while checked is on true, Custom Gutenberg Block
body: <p>I a clue to show a div whenever the user check an input with the type of checkbox.</p>
  <p>To see the behavior i'm waiting for, i share you a screenshot of what the display looks like.</p>
  <p><a href="https://i.stack.imgur.com/ocCNb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ocCNb.png" alt="Gutenberg view" /></a></p>
  <p>So as you can see i want to show a div with the possibility to add a link in an input.</p>
  <p>Here is the associated code :</p>
  <pre><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: &quot;string&quot;},
          Qtt: {type: &quot;string&quot;},
      },
      edit: function(props) {
          const ALLOWED_BLOCKS = ['astra/listedosage'];
          const [checked, setChecked] = useState(false);
  
          const handleChange = () =&gt; {
            // 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 (
              &lt;div className=&quot;blocListeDosage&quot;&gt;
  
                     &lt;div className=&quot;blocListeDosageIngName&quot;&gt;
                         &lt;input type=&quot;text&quot; autocomplete=&quot;off&quot; placeholder=&quot;Nom de l'ingrédient&quot; onChange={updateIngname} value={props.attributes.Ingname} /&gt;
                     &lt;/div&gt;
  
                     &lt;div className=&quot;blocListeDosageLink&quot;&gt;
                         &lt;div&gt;Lien ?&lt;/div&gt;
                         &lt;input type=&quot;checkbox&quot; checked={checked} onChange={handleChange}/&gt;
                     &lt;/div&gt;
  
                     &lt;div className=&quot;blocListeDosageIngQtt&quot;&gt;
                         &lt;input type=&quot;text&quot; autocomplete=&quot;off&quot; placeholder=&quot;Quantité&quot; onChange={updateQtt} value={props.attributes.Qtt} /&gt;
                     &lt;/div&gt; 
                     
  { checked &amp;&amp; ( 
                     &lt;div className=&quot;blocListeDosageLinkHover&quot;&gt;
                         &lt;input type=&quot;text&quot; autocomplete=&quot;off&quot; placeholder=&quot;Lien vers le produit&quot;  onChange={updateLink} value={props.attributes.Link} /&gt;
                     &lt;/div&gt;
  )}
              &lt;/div&gt;
          )
      },
      save: function (props) {
          return (
              &lt;div className=&quot;blocListeDosage&quot;&gt;
                     
              &lt;/div&gt;
          )
      }
  })
  </code></pre>