Stijn
Stijn
PostsComments
SSolidJS
Created by Stijn on 2/2/2025 in #support
Trying to understand stores in a reactive scope
Thank you very much for your help, @peerreynders. You pointed me in the right direction and I learned something along the way (about destructuring for example) 👍
14 replies
SSolidJS
Created by Stijn on 2/2/2025 in #support
Trying to understand stores in a reactive scope
Ah, I found the culprit. It's that LabelIconRow, which does something internally that breaks the reactivity. Not sure what yet, I'll figure it out, but if I change its internals to literally {props.text} everything works as I expected
14 replies
SSolidJS
Created by Stijn on 2/2/2025 in #support
Trying to understand stores in a reactive scope
vs 
      setExplorer(
        "clips",
        (clip: ClipTreeItem) => clip.id == id,
        "name",
        change.name
      );
      setExplorer(
        "clips",
        (clip: ClipTreeItem) => clip.id == id,
        "name",
        change.name
      );
14 replies
SSolidJS
Created by Stijn on 2/2/2025 in #support
Trying to understand stores in a reactive scope
Hmmm, if I do this it does work, so either I'm doing providing the path incorrectly, or that triggers some more fine-grained reactivity I'm not handling correctly in the component. 
      const clips = explorer.clips.map((clip) => {
        if (clip.id === id) {
          return { ...clip, name: change.name };
        }
        return clip;
      });
      setExplorer({ clips });
      const clips = explorer.clips.map((clip) => {
        if (clip.id === id) {
          return { ...clip, name: change.name };
        }
        return clip;
      });
      setExplorer({ clips });
14 replies
SSolidJS
Created by Stijn on 2/2/2025 in #support
Trying to understand stores in a reactive scope
Really gotta get to bed now, but I will investigate further in the morning. At least it's good knowing that it's supposed to work, so I know to search for where the reactivity breaks down
14 replies
SSolidJS
Created by Stijn on 2/2/2025 in #support
Trying to understand stores in a reactive scope
Here's the (stripped down) version of the component 
interface ClipTreeProps {
    rows: ClipTreeItem[];
}

export type ClipTreeItem = {
    id: string;
    name: string;
};

const ClipTree = (props: ClipTreeProps) => {
    return (
        <div class="clip-tree">
            <For each={props.rows}>
                {(row) => (
                    <ClipTreeRow
                        text={row.name}
                    />
                )}
            </For>
        </div>
    );
}

interface ClipTreeRowProps {
    text: string;
}

const ClipTreeRow = (props: ClipTreeRowProps) => {
    return (
        <LabelIconRow text={props.text} editable={true} icon={props.root && <AiFillStar class="root-star" />} onRename={props.onRename} />
    );
}
interface ClipTreeProps {
    rows: ClipTreeItem[];
}

export type ClipTreeItem = {
    id: string;
    name: string;
};

const ClipTree = (props: ClipTreeProps) => {
    return (
        <div class="clip-tree">
            <For each={props.rows}>
                {(row) => (
                    <ClipTreeRow
                        text={row.name}
                    />
                )}
            </For>
        </div>
    );
}

interface ClipTreeRowProps {
    text: string;
}

const ClipTreeRow = (props: ClipTreeRowProps) => {
    return (
        <LabelIconRow text={props.text} editable={true} icon={props.root && <AiFillStar class="root-star" />} onRename={props.onRename} />
    );
}
LabelIconRow eventually puts the text into a <span></span>
14 replies
SSolidJS
Created by Stijn on 2/2/2025 in #support
Trying to understand stores in a reactive scope
Ah, no, I don't destructure, but I didn't know that, so thank you 🙂
14 replies
SSolidJS
Created by Stijn on 2/2/2025 in #support
Trying to understand stores in a reactive scope
Hey @peerreynders, thank you for taking the time to answer. I'm relatively new to solid, so it's much appreciated 🙂
So I don't know what “does not update one of the clips” means in this context; that would only make sense if there are multiple clips with the same id in the clips array.
Yes, I meant that I have a list of multiple clips (each with a unique ID), but I don't see any changes when mutating the store. What I'm doing internally is pretty much like what you show in the playground, and there it clearly works. This leaves me wondering where the difference lies, so I'm diving a bit deeper.
14 replies