Svelte `unexpected character '#'` when using an if block

Question

I'm trying to conditionally display information inside a <textarea> like this :

<script>
  let name = 'world';
</script>

<textarea>
  {#if name}{name}{/if}
</textarea>

This throws Unexpected character '#' when compiling.

What is happening here ?

Answer 1

You cannot use svelte syntax inside input elements.

What will work:

<script>
  let name = 'world';
</script>

{#if name}
    <textarea>
        {name}
    </textarea>
{/if}

or:

<textarea bind:value={name} />