Mastering Conditional Rendering and Lists in Svelte
Tags: tutorial, svelte, sveltekit, beginners
Published: 2023-09-25 15:23:03

In the previous assignment, you had the task of creating a counter and exploring the functionality of components in Svelte. Today, our focus will shift towards mastering the art of conditionally rendering components and efficiently rendering lists using loops.

if you haven't read part 1 and 2 check

* [https://dev.to/joeljaison394/unlocking-the-power-of-svelte-mastering-bindings-70l](https://dev.to/joeljaison394/unlocking-the-power-of-svelte-mastering-bindings-70l)
    
* [https://dev.to/joeljaison394/getting-started-with-svelte-a-comprehensive-tutorial-series-44a3](https://dev.to/joeljaison394/getting-started-with-svelte-a-comprehensive-tutorial-series-44a3)
    

## **Conditional Rendering in Svelte**

Conditional rendering is a crucial concept in web development, allowing us to display different content based on certain conditions. In Svelte, this is quite straightforward thanks to its clean and intuitive syntax.

### **Basic Conditional Rendering**

Let's start with the basics. To conditionally render content in Svelte, we use the `{#if}` and `{/if}` blocks. Here's an example:

```javascript
<script>
  let showContent = true;
</script>

{#if showContent}
  <p>This content will only display if showContent is true.</p>
{/if}
```

In this code, the paragraph will be shown only if `showContent` is `true`.

### **Conditional Rendering with** `else`

Sometimes, you want to display one thing when a condition is true and something else when it's false. Svelte allows you to do this with the `{:else}` block:

```javascript
<script>
  let loggedIn = true;
</script>

{#if loggedIn}
  <p>Welcome, user!</p>
{:else}
  <p>Please log in.</p>
{/if}
```

Here, if `loggedIn` is `true`, it will display the welcome message, and if `loggedIn` is `false`, it will display the login prompt.

### **Conditional Rendering with Ternary Operator**

If you have a simple conditional, you can use a ternary operator for a concise syntax:

```javascript
<script>
  let isLoggedIn = false;
</script>

{isLoggedIn ? (
  <p>Welcome, user!</p>
) : (
  <p>Please log in.</p>
)}
```

This code achieves the same result as the previous example but with a more compact format.

## **Ticket Pricing for the Fun Ride**

Now, let's apply our knowledge of conditional rendering to a real-world scenario: pricing tickets for a fun ride. Our pricing scheme is as follows:

* **Children below 10 years**: $5
    
* **Children between 10 and 20 years**: $10
    
* **Teenagers and young adults up to 60 years**: $15
    
* **Children below 5 years and adults above 60 years**: Not allowed to enter.
    
    ```javascript
    <script>
    	let age = 0; 
    	let ticketPrice;
    	let showTicket = false;
    	let name = "";
    
    	function calculateTicketPrice() {
    		if (age < 5 || age > 60) {
    			ticketPrice = null; 
    		} else if (age < 10) {
    			ticketPrice = 5;
    		} else if (age >= 10 && age <= 20) {
    			ticketPrice = 10;
    		} else if (age <= 60) {
    			ticketPrice = 15;
    		}
    
    		return ticketPrice;
    	}
    </script>
    
    <div class="container mx-auto p-4">
    	<h1 class="text-3xl font-semibold mb-4 underline">Fun Ride Ticket Pricing</h1>
    
    	<div class="mb-4">
    		<label for="name" class="block text-gray-700 text-xl p-2">Enter your name:</label>
    		<input type="text" id="name" name="name" placeholder="Name" class="border rounded-lg p-4 w-50" bind:value={name} />
    		<label for="age" class="block text-gray-700 text-xl p-2">Enter your age:</label>
    		<input type="number" id="age" name="age" class="border rounded-lg p-4 w-24 mr-4" bind:value={age} />
    		<button on:click={() => showTicket = true} class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-full transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-md ">Get Ticket</button>
    	</div>
    	{#if showTicket}
    		{#if age > 0}
    			{#if ticketPrice !== null}
    				<div class=" bg-yellow-300 w-52 hover:bg-yellow-400 border-2 border-yellow-500 rounded-lg p-4 shadow-lg transform scale-105 transition duration-300 ease-in-out ">
    					<p class="text-2xl font-bold mb-2">Ticket Details</p>
    					<p class="text-blue-500">Name: {name}</p>
                        <p class="text-blue-500">Date: {new Date().toLocaleDateString()}</p>
                        <p class="text-green-600">Ticket Price: ${calculateTicketPrice()}</p>
                        <p class="text-purple-500 mt-2 hover:text-purple-700 cursor-pointer transition duration-300 ease-in-out">Enjoy the ride!</p>
    				</div>
    			{:else}
    				<p class="text-red-500 text-xl mt-4">Sorry, you are not allowed to enter the fun ride.</p>
    			{/if}
    		{/if}
    	{/if}
    </div>
    ```
    
    In this example, we calculate the ticket price based on the `age` variable using conditional statements. If the age falls within one of the specified ranges, it displays the ticket price; otherwise, it informs the user that they are not allowed to enter the fun ride.
    
    Conditional rendering in Svelte makes it easy to create dynamic and responsive interfaces, like our ticket pricing system for the fun ride.🎢🎉
    

![demo app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iavqykd0rpn7kdrkiojf.png)


![demo app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f04njm0tzd1ik75cieki.png)


![demo app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w8xsh2xcoeucybn79ohz.png)



## **Rendering Lists in Svelte**

Now, let's see another aspect of Svelte: rendering lists using the `{#each}` block.

### **Using** `{#each}` to Render Lists

Svelte provides a convenient way to iterate over arrays and render lists of elements using the `{#each}` block. Here's an example:

```javascript
<script>
  let fruits = ['Apple', 'Banana', 'Cherry'];
</script>

<ul class="list-disc pl-4">
  {#each fruits as fruit }
    <li class="text-green-600">{fruit}</li>
  {/each}
</ul>
```

In this code:

* We have an array of `fruits`.
    
* We use `{#each}` to iterate over the `fruits` array and render a list item (`<li>`) for each fruit.
    
* We also display the index of each fruit in the array.
    
    ### **Using Keys in Lists**
    
    When rendering lists in Svelte, it's crucial to understand the significance of using keys. Keys are unique identifiers assigned to each item in the list, helping Svelte efficiently update and manipulate the DOM when the list changes.
    
    ### **Why Use Keys?**
    
    Imagine you have a list of items displayed on a web page. This list can change dynamically due to various actions, such as adding or removing items. When a change occurs, Svelte needs to update the DOM to reflect the new state of the list.
    
    Without keys, Svelte might struggle to differentiate between items in the old list and items in the new list. This can lead to unnecessary re-rendering of elements, affecting performance and potentially causing unintended side effects.
    
    Let's illustrate the importance of keys with an example:
    
    ```javascript
    <script>
      let fruits = ['Apple', 'Banana', 'Cherry'];
    </script>
    
    <ul class="list-disc pl-4">
      {#each fruits as fruit (fruitIndex)}
        <li class="text-green-600">{fruit} (Index: {fruitIndex})</li>
      {/each}
    </ul>
    ```
    
    In this code, we have a list of fruits. Each item in the list is rendered as an `<li>` element within an unordered list. The index of each fruit is also displayed.
    
    Now, let's say we want to add a new fruit to our list:
    
    ```javascript
    <script>
      let fruits = ['Apple', 'Banana', 'Cherry', 'Date']; 
    </script>
    ```
    
    Without keys, when Svelte updates the list, it might re-render all elements, even though the existing items haven't changed. This inefficiency can lead to performance issues, especially with larger lists.
    
    By using keys, we provide Svelte with a unique identifier for each item. When we add the 'Date' fruit with a key, Svelte knows precisely which item has been added and can efficiently update the DOM without affecting other elements.
    

Now a note - \[Svelte's reactivity system ensures that when you add or remove elements from an array, your UI stays in sync with the data, providing a seamless and responsive user experience.\]

example :

### Adding and Removing Elements of an Array

```javascript
<script>
  let products = [
    { id: 1, name: 'Product A', price: 10 },
    { id: 2, name: 'Product B', price: 20 },
    { id: 3, name: 'Product C', price: 30 }
  ];

  let newProduct = {
    id: null,
    name: '',
    price: 0
  };

  function addProduct() {
    if (newProduct.name && newProduct.price > 0) {
      newProduct.id = products.length + 1;
      products = [...products, { ...newProduct }];
      newProduct = {
        id: null,
        name: '',
        price: 0
      }; 
    }
  }

  function removeProduct(id) {
    products = products.filter(product => product.id !== id);
  }
</script>

<div class="mx-auto p-4">
  <input type="text" bind:value={newProduct.name} placeholder="Product Name" class="border rounded-lg p-2" />
  <input type="number" bind:value={newProduct.price} placeholder="Price" class="border rounded-lg p-2" />
  <button on:click={addProduct} class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-full transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-md">Add Product</button>
</div>

<ul class="mt-4">
  {#each products as product (product.id)}
    <li key={product.id} class="bg-yellow-100 p-4 mb-2 rounded-lg shadow-md flex justify-between items-center">
      <div>
        <p class="text-xl font-semibold">{product.name}</p>
        <p class="text-gray-600">${product.price}</p>
      </div>
      <button on:click={() => removeProduct(product.id)} class="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded-full transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-md">Remove</button>
    </li>
  {/each}
 /ul>
```


![demo img-1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/izxyaadwxbdl6h4tmrit.png)




We've laid the foundation of Svelte's basics, but this is just the beginning. The world of Svelte is full of possibilities waiting to be explored.

For the assignment, take the fun ride we built earlier and expand it. Add more exciting rides using lists and create separate tickets for each ride. This will not only solidify your understanding but also enhance your web development skills.

Remember, learning is a journey. If you face any challenges or need clarification, don't hesitate to reach out via email or comments. Your path to mastering Svelte has just begun, and the adventures ahead are limitless! 🎢🚀.

Thank you❤️