Getting references to Components generated in an each block

Using bind:this allows a component to store a reference to it’s children, this can also be used when generating a series of components in an {#each} block.

Method 1: Using an array

This method simply binds the generated component to an array element based on it’s index within the loop.

<script>
  import Child from "./Child.svelte";
  const array = [
    { id: 1, title: "apple" },
    { id: 2, title: "banana" },
  ];
  const children = [];
</script>

{#each array as item, i}
<Child title="{item.title}" bind:this="{children[i]}" />
{/each}

Method 2: Using an object as a hashtable

An alternative is to use an unique key and bind the component to an object, effectively making a hashtable of components.

<script>
  import Child from "./Child.svelte";
  const array = [
    { id: 1, title: "apple" },
    { id: 2, title: "banana" },
  ];
  const children = {};
</script>

{#each array as item, i (item.id)}
<Child title="{item.title}" bind:this="{children[item.id]}" />
{/each}