Svelte: Parameter in function not updated in each loop

[rudywaltz]

I made a small example but in nutshell: After the click, the DOM render correctly, but each parameter in the function which was before the clicked element, shifted.
I used the latest svelte (3.4.2)

let playlist= [{
  id: 1,
  name: 'Foo'
}, {
  id: 2,
  name: 'Bar'
}, {
  id: 3,
  name: 'Boom'
}];

const removeSong = id => () => {
  playlist = playlist.filter(song => song.id !== id);
};

{#each playlist as song}
<h1 on:click={removeSong(song.id)}>{song.id}: {song.name}</h1>
{/each}

p.s.: It's fixing if I provide key expression
{#each playlist as song (song.id)}

[webdesq]

Hi David, the problem is how you call the removeSong() function. the on:click gives a MouseEvent; if you want to bind your own event handler (in your case: the removeSong function) you must use an inline function that receives the original click event. In your inline function you can call whatever function you want.

However, using a keyed array (adding an id in the each loop) is probably a cleaner solution.

```

Called ID: {idParam}

{#each playlist as song}

{/each}