How to render a component multiple times based on integer in Svelte?

Question

Case: Render the Button component 5 times

<script>
  const timesToBeRendered = 5;
</script>

<Button/> //Render this component x (5) times

Answer 1

You can do it using svelte each

<script>
  import Button from './Button.svelte'
  const timesToBeRendered = 5;
</script>

{#each Array(timesToBeRendered) as _, index}
  <Button key={index} />
{/each}

Repl

Answer 2

new Array(timesToBeRendered).fill(0) will create an empty array with N 0's, that you can loop over. (yes the fill is required)

new Array(timesToBeRendered).fill(0).map((_, i)=><Button key={i}/>) will return a list of components, which react renders as siblings.

Dont forget key otherwise react cannot distinguish between the elements!