S
SolidJS•3y ago
tozz

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?
2 Replies
REEEEE
REEEEE•3y ago
To keep reactivity you would have to make it a function 
const attributes = () => node.attributes

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

attributes().name
tozz
tozzOP•3y ago
Ah, of course, thanks. Need to get into the Solid mindset 🙂

Did you find this page helpful?