render components from an array with the name of the components (as strings)

[tryggs]

Array: ["Comp1", "Comp2", "Comp3", "Comp4"]

how would I render these four components with only the name of the component stored as strings in an array?

the solution has to be dynamic so it shouldn't matter how many components or what the component is.
The components will always exist!

Thanks!

[stephane-vanraes]

You would have to create some mapping from string to actual component:

const mapping = {
   "Comp1": Comp1,
   "Comp2": Comp2
}

and then use that instead:

<svelte:component this={mapping[component]} />

[tryggs]

Thank you!
for now, this is the solution that I will go with but do you think that there is any way to pass a string as this directly so I don't have to create a map manually?

[stephane-vanraes]

No there isn't, this has to be a component.

[tryggs]

got it! Thank you