CODEWITHSUNDEEP
javascriptnode.jssvelte
nafkhanzam
nafkhanzam

Reputation: 337

Svelte equivalent of React's props.children?

I haven't found this feature anywhere in svelte 3.. I want it to be something like this..

App.svelte

<Error>
   <p>Can't connect to the server!</p>
</Error>`

Error.svelte

<div>{props.children}</div>

I want App.svelte to show:

<div><p>Can't connect to the server!</p></div>

I only know how to do this with React's props.children.

Upvotes: 20

Views: 9024

Answers (2)

StanMarsh
StanMarsh

Reputation: 557

If you're looking for the Svelte 5 version of children, <slot /> has been deprecated and now uses children from the $props() rune.

So for example:

//Error.svelte

<script>
  let { children } = $props();
</script>

<div>
  {@render children?.()}
</div>

See more in the migration docs.

Upvotes: 5

GAGANDEEP SINGH
GAGANDEEP SINGH

Reputation: 1006

You can use slot. It is a component provided by svelte. You can use it inside your component. Whatever is passed to component will be rendered in place of slot

Try this in your error.svelte

<div>
    <slot />
</div>

Upvotes: 30

Related Questions