Question 267851 in Html Question posted in
Some basic documentation can be found here.

Conditional HTML rendering in SvelteKit not working as intended

So I have a footer component that reads links from a JSON file. I have a particular header that I only want to have present if the corresponding JSON property is not blank (i.e., if there’s no link provided, it won’t show up.) My current setup looks a little like this:

{#if (socialMediaLinks["contactUs"] !== "")}
  <a href={socialMediaLinks["contactUs"]}>
    <h2>Contact Us</h2>
  </a>
{/if}

Issue being, this code results in the h2 always being visible, even with no link provided. If i try and alter the if to

{#if (socialMediaLinks["contactUs"] === "")}

the link doesn’t show even if the property isn’t blank.

This behavior feels backwards. Am I missing something?

Tags:

2

Answers


  1. 0 
    if (socialMediaLinks["contactUs"].length > 9){
    {@html socialMediaLinks["contactUs"]}
}
    Login or Signup to reply.
  2. 0

    The problem lies in your IF, I’m guessing. The value of socialMediaLinks["contactUs"] might be either null or undefined and you are requesting exact comparison (triple operator).

    This should work:

    {#if (socialMediaLinks["contactUs"])}
  <a href={socialMediaLinks["contactUs"]}>
    <h2>Contact Us</h2>
  </a>
{/if}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search