Reaching into nested properties and keeping them reactive?

Coming from React I really like that I can destruct nested props into single variables, in this example I have a JSON (using createResource with flow as the signal) that has a couple of levels where I parse it and loop it over with a <For> <For each={flow().ui.nodes}>{nodeValue}</For> The nodeValue function looks like this (I could of course inline it all, and I might, but for now it's its own function)
const nodeValue = (node) => {
return (
<Switch>
<Match when={node.attributes?.node_type === 'input'}>
<>
{node.type === 'hidden' && (
<input type="hidden" name={node.attributes.name} value={node.attributes.value} />
)}
{node.type === 'text' && (
<Input name={node.attributes.name} value={node.attributes.value} label={node.attributes.label} />
)}
</>
</Match>
</Switch>
);
};
const nodeValue = (node) => {
return (
<Switch>
<Match when={node.attributes?.node_type === 'input'}>
<>
{node.type === 'hidden' && (
<input type="hidden" name={node.attributes.name} value={node.attributes.value} />
)}
{node.type === 'text' && (
<Input name={node.attributes.name} value={node.attributes.value} label={node.attributes.label} />
)}
</>
</Match>
</Switch>
);
};
Can I avoid having to do node.attributes.x and rather get node.attributes as a flat var and use var.name instead?
R
REEEEE265d ago
To keep reactivity you would have to make it a function
const attributes = () => node.attributes

attributes().name
const attributes = () => node.attributes

attributes().name
T
tozz265d ago
Ah, of course, thanks. Need to get into the Solid mindset 🙂