Im new to Svelte and a bit confused about the rendering in Svelte.
So I have this code:
<script>
export let recipients: string[];
let recipientsContainer: HTMLDivElement;
const shouldRenderRecipient = (recipient) => {
return !recipientsContainer?.textContent;
}
</script>
<div>
<div bind:this={recipientsContainer}>
{#each recipients as recipient}
{shouldRenderRecipient(recipient) ? recipient : ''}
{/each}
</div>
</div>
so what I expected would happen was that the view would be rendered and then the recipients would be looped and for each recipient itd check renderRecipient
and depending on whether there was already a rendered recipient it would either throw true or false. But whats confused me is that the shouldRenderRecipient
function is entered before we have a valid DOM reference for recipientsContainer
.
I thought we would have access to recipientsContainer
inside of shouldRenderRecipient
function since shouldRenderRecipient
function only gets called once the view is rendered?