child-components not updating when parent state is modified.
Paragraph component:
https://pastebin.com/raw/Y9tM6qgN
Word component:
https://pastebin.com/raw/zR6JCYbD
Description
The Paragraph component keeps track of Word components' data within a signal.
It contains
toggleWordMark function which is passed to each Word component as a callback function.
Each Word, when clicked, calls toggleWordMark and its data is updated within the Paragraph's words signal.
Problem
The word components are not re-rendered when the Paragraph state is modified.9 Replies
looks like u want nested reactivity. you should probably use a store instead of a signal
In
toggleWordMark you’ve only shallowly destructuring the words array. Since you’re using a single signal, you should make sure to destructure all modified objects, in this case it would be the modified word.
Nothing is updating because For is comparing references of items in each charge, and all references are in tact, nothing will update.Destructuring the objects have worked! Thank you <a:pepe_saber:1094297975141978214>
Cool
Now add a
console.log("word created"); onCleanup(() => console.log("word destroyed")) to the Word component body and see if something isn’t rightboth print to the console 👀
Atm it doesn't completely work as expected Xd but there's a little progress
I'm trying to get these Word components to highlight as normal text does when click+dragging the mouse over them
I'm wondering; might it be a better idea to keep track of 
startIndex and endIndex within the store, then use createEffect for each Word that depends on indices and updates their own state when a change is made. Yeah the “selection state” could definitely be kept separate from the words list
that's not right tho is it? you want to only toggle the class and not recreate the whole component. so it shouldn't destroy and recreate just to toggle a class
small PoC with a store: https://playground.solidjs.com/anonymous/c5c8bd7c-efb5-4207-9b4b-eedb37ecb586
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
or without a store: https://playground.solidjs.com/anonymous/c7ea10ec-da94-4321-a1ca-aad174aa7a6c
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template