Snippet

Updating Reactive Arrays with the Spread Operator

Svelte relies on assignment to trigger reactivity. Using the spread operator to create a new array reference ensures the UI automatically re-renders when adding elements.

snippet.js

javascript

<script>
  let fruits = ['Apple', 'Banana'];
 
  function addFruit(newFruit) {
    fruits = [...fruits, newFruit];
  }
</script>
 
<button on:click={() => addFruit('Orange')}>Add Orange</button>
<ul>
  {#each fruits as fruit}
    <li>{fruit}</li>
  {/each}
</ul>

svelte

Breakdown

fruits = [...fruits, newFruit];

Creates a new array containing existing items plus the new item and reassigns it to trigger reactivity.

{#each fruits as fruit}

Iterates over the updated reactive array to render each list item.

Previous snippet Next snippet

More Beginner JavaScript exercises →

Updating Reactive Arrays with the Spread Operator

Related