CODEWITHSUNDEEP
sveltesveltekitsvelte-5svelte-runes
NickyLarson
NickyLarson

Reputation: 197

Svelte 5 Runes - unable to bind child component props directly to parent component props

In Svelte 5, using Runes syntax, I'm trying to bind a prop from a child component to the prop of a parent component directly.

The only way I am able to get this to work is by creating a local state variable in the parent and updating the local state value first, before updating the prop with the local state value.

I did not have to do this in Svelte 4 and this seems unnecessarily wordy and clunky.

What am I missing?

Example working binding:

<script>
   let { someProp = $bindable() } = $props();

   let localPropState = $state(someProp);

   $effect(() => {
       someProp = localPropState;
   });
</script>

<ChildComponent bind:localPropState />

Example not working binding:

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

<ChildComponent bind:someProp />

Upvotes: 3

Views: 1277

Answers (1)

NickyLarson
NickyLarson

Reputation: 197

The problem was that further up the component tree someProp was still being set as Svelte 4 $writable instead of Svelte 5 $state.

Upvotes: 1

Related Questions