I am heavily confused about passing props to a component within a loop in Svelte. The behavior I expected of the code snippet below is that a change in the store variable files triggers re-rendering of the content which works flawlessly for the divs classes and {file}: {is_open}. However, the child component Icon does not receive the updates of the is_open variable. This leads to a weird situation where {file}: {is_open} renders as filename: true in this component while the child component Icon would display filename: false instead.
{#each Object.entries($files) as [file, is_open], i}
<div class:open={is_open} class:closed={!is_open}>
<div on:click={() => openFile(file)}>
{file}: {is_open}
</div>
<div on:click={() => closeFile(file)}>
<Icon bind:open={is_open} />
</div>
</div>
{/each}
Searching for a solution for this issue I stumbled upon this thread which indicates that this is indeed the expected behavior in this case. But how can I make this work then? In stark contrast to my overall experience with Svelte, I find this extremely counterintuitive.
EDIT:
Turns out I do not directly use is_open in the child component but store the value in another variable without $: notation, hence this variable is not recomputed. My bad, problem solved.
what you are looking for is a keyed each block, this will make sure that the divs (the block within the each statement) will be mapped correctly to the right file state.
you can also check the official svelte tutorial about keyed each in your case
{#each Object.entries($files) as [file, is_open], i (file)} <!--added (file)-->
<div class:open={is_open} class:closed={!is_open}>
<div on:click={() => openFile(file)}>
{file}: {is_open}
</div>
<div on:click={() => closeFile(file)}>
<Icon bind:open={is_open} />
</div>
</div>
{/each}