Is this a reactivity bug? How can I have a reactive array inside a SvelteMap?

[beeb]

See the following playground:

https://svelte.dev/playground/4f9ee03e6b504b349fb9aa087c0f6aba?version=5.23.2

I want the second button to have immediate effect on the result. However, when changing the array contained within the map, and re-assigning the map element, reactivity does not occur.

[brunnerh]

The items in the map need to be stateful. E.g.

const handleAddCategory = () => {
	counter += 1
	const item = $state({
		items: []
	});
	map.set(counter, item)
}

This wraps the object in a state proxy that provides reactivity signals. This only works for plain objects and arrays. Primitives and class instances can not be made reactive this way. For classes the individual properties need to use $state.

[beeb]

Thanks you! I had tried to make only the array reactive inside the object but I had an error ($state(...) can only be used as a variable declaration initializer or a class field). The key is to define the object as a reactive object with the $state rune separately, then assign that to the map element.