🙏 Request: Allow pushing components into array and rendering them in a {#each} block

[rodryquintero]

Here is what I would like to do in Svelte.

const components = [
<Edit />,
<Delete />
<Info />
]

{#each components as comp}
<Comp />
{/each}

A use case would be passing a list of button components to a data grid component, like this.

<DataGrid actionButtons={components} />

[mrkishi]

You can use <svelte:component> for this:

<script>
    export let actions = [];
</script>

{#each actions as component}
    <svelte:component this="{component}">
{/each}

<script>
    import { Edit, Delete, Info } from './components.js';

    const actions = [Edit, Delete, Info];
</script>

<DataGrid {actions}/>

[rodryquintero]

Thanks for the quick reply. I am puzzled by this line.

import { Edit, Delete, Info } from './components.js';

I thought that you can only define one Svelte component per file. How do you go about defining several components on a single file?

[mrkishi]

That was just an example. Normally you'd have one component per .svelte file.

You could have components.js like this, though:

export { default as Edit } from `./Edit.svelte`;
export { default as Delete } from `./Delete.svelte`;
export { default as Info } from `./Info.svelte`;

[rodryquintero]

Understood. Thanks for all the help.

[rodryquintero]

Sorry to bother again. Given this solution, how do you go about passing props to these components when building the array of components? In React, it would be done like this:

const components = [
<Edit onClick={handleEdit} />,
<Delete onClick={handleDelete} />,
<Info onClick={handleInfo} />
]

Thanks in advance.

[tivac]

<script>
import Edit from `./Edit.svelte`;
import Delete from `./Delete.svelte`;
import Info from `./Info.svelte`;

const components = [
    [ Edit, handleEdit ],
    [ Delete, handleDelete ],
    [ Info, handleInfo ],
];
</script>

{#each components as [ component, onclick ]}
    <svelte:component this="{component}" {onclick} />
{/each}

Seems like it'd work though I haven't explicitly tried it. The {onclick} bit is using the shorthand version of onclick="{onclick}".

[rodryquintero]

Thanks. I appreciate all the help. 👍