Condition print false in DOM

1

Hello,
I am confused about the behavior of a condition

selected_comb is a store state and value is 0
into DOM i’ve this condition

${selected_comb.value > 0 && $h`
<button class="button add-to-cart" @click=${() => addToCart()}>Add to cart</button>
`}

Why this produce “false” print into DOM?
what am I doing wrong? I have used conditions in so many other parts of the project, but only this time I have this “false”

Schermata 2021-06-12 alle 15.10.45
Schermata 2021-06-12 alle 15.10.45970×1034 74.3 KB

2

i’ve done some test
nested condition when false, print false into DOM

${1 == 1 ? $h`
     ${0 > 0 && $h`
          hello test                
      `}
`: $h`
      hello
`}

if it put

${0 > 0 && $h`
    hello test                
`}

out from another condition, all works fine

this work fone too, but without $h html is not processed
${selected_comb.value > 0 ? '<button class="button add-to-cart" @click=${() => addToCart()}>Aggiungi al carrello comb</button>' : ' ' }

@nolimits4web am I doing something wrong?

1 Like
3

I notice the same issue on my app. Let’s wait Vlad.

4

it’s not about nested.
you can use infinite nested (not really, but you know what i mean)

here are the rules:

<div class="block">
  <p>1. ${true}</p>          <!-- output => 'true'  -->
  <p>2. ${false}</p>         <!-- output => ''      -->
  <p>3. ${`${true}`}</p>     <!-- output => 'true'  -->
  <p>4. ${`${false}`}</p>    <!-- output => 'false' -->
  <p>5. ${$h`${true}`}</p>   <!-- output => 'true'  -->
  <p>6. ${$h`${false}`}</p>  <!-- output => ''      -->
  <p>7. ${$h` ${true}`}</p>  <!-- output => 'true'  -->
  <p>8. ${$h` ${false}`}</p> <!-- output => 'false' -->
</div>
<div class="block">
  <p>1. ${true && $h`${true && $h`hello`}`}</p>  <!-- output => 'hello' -->
  <p>2. ${true && $h`${false && $h`hello`}`}</p> <!-- output => ''      -->
  <p>3. ${true && $h` ${false && $h`hello`}`}</p><!-- output => 'false' -->
</div>
1 Like
5

btw, if you want to use the ternary-op with html tags:

${true ? $h`<div>OK</div>` : $h`<div>ko</div>`}
2 Likes
6

You guys overuse $h literal, it MUST WRAP ONLY HTML OUTPUT! Not anything else

7

so is not correted the fist line of this snippet?
what is the right way to write this thing correctly?

          ${product.value.combinations !== undefined && $h`
            ${product.value.combinations.length > 0 && $h`
              <div class="box-combinazioni">
              ${product.value.combinations.map((comb) => $h`
              <div class="product-comb comb-${comb.comb_id}" @click=${() => selectComb(comb)}>
                <span>${comb.comb_name}</span>
                ${product.value.currency} ${comb.comb_price}<br />
                <small style="color:green;">Disp. ${comb.comb_qnt}</small>
              </div>
              `)}
              </div>
            `}
          `}
8 
${!!(product.value.combinations || []).length && $h` 
  <div>ok</div>
`}
9

you should avoid nested conditions such as:
product.value.combinations !== undefined
product.value.combinations.length > 0

you can use for example optional chaining
product?.value?.combinations?.length > 0

10

just using if else conditional and use html code "<code></code>" to false value
like this
${item.mgi_status > 3 ? $h <li> </li> : $h <code></code> }

11

yes this occurs some times. So, if it happened with you, just wrap your condition inside dumy span.

try this

<span>
${selected_comb.value > 0 && $h`
<button class="button add-to-cart" @click=${() => addToCart()}>Add to cart</button>
`}
</span>