How to perform Svelte Conditional Rendering?

In this post, we will learn how to do Svelte Conditional Rendering.

It is a common requirement in most applications where we wish to display or hide some piece of markup when certain conditions are met. Basically, this is the foundation of dynamic web pages that adapt to user action. Conditional rendering in Svelte helps us with such use cases.

1 – The If Conditional

Let us start with a simple example. In our library application post, we created a Svelte Nested Component. The job of the nested component was to show the details of a book.

We can now enhance the application to show the book details when a button is clicked.

See below example:

<script>
    import Book from "./Book.svelte"
    let bookName = "Eye of the World";
    let author = "Robert Jordan"
    let showBooks = false
    
</script>

<p>Welcome to the Fantasy Library</p>
<button on:click="{showBooksButton}">Show Books</button>
{#if showBooks}
<Book 
    {bookName} 
    {author} 
/>
{/if}

For reference, below is the code for the Book component.

<script>
    export let bookName;
    export let author
</script>
<div>
    <p>Book Name: {bookName}</p>
    <p>Author: {author}</p>
</div>

Here, the conditional logic depends on a new variable showBooks. We use #if to specify our conditional logic. The # symbol simply denotes that we have a multi-line statement. Then, we use the boolean variable showBooks to determine whether to show the Book details. Lastly, we close the conditional using /if.

See below snippet.

<button on:click="{showBooksButton}">Show Books</button>
{#if showBooks}
<Book 
    {bookName} 
    {author} 
/>
{/if}

The function showBooksButton() simply sets the value of showBooks variable as true. We call this function using the on:click directive.

2 – The If-ElseIf-Else Conditional

The if condition certainly helps us write a conditional statement. However, the requirements are often more complicated. More often that not, we need to have branching conditions.

We can easily do that in Svelte using a combination of elseif and else conditionals.

See below example:

<p>Welcome to the Fantasy Library</p>
<button on:click="{showBooksButton}">Show Books</button>
{#if showBooks}
<Book 
    {bookName} 
    {author} 
/>
{:else if !showBooks} 
<p>Click on the button to show books</p>
{/if}

As you can see, we introduce a :else if statement within the if block. In case the showBooks is false, we print a message. Once the user clicks on the button, we show the book details.

We can also use else instead of else if. See below:

<p>Welcome to the Fantasy Library</p>
<button on:click="{showBooksButton}">Show Books</button>
{#if showBooks}
<Book 
    {bookName} 
    {author} 
/>
{:else} 
<p>Click on the button to show books</p>
{/if}

We can also have multiple if-else-if condition

Conclusion

With this, we have successfully learnt how to perform Svelte Conditional Rendering.

If you have any comments or queries about this post, please mention in the comments section below.