SolidJS•2y ago

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•2y ago

To keep reactivity you would have to make it a function

const attributes = () => node.attributes

attributes().name

const attributes = () => node.attributes

attributes().name

tozzOP•2y ago

Ah, of course, thanks. Need to get into the Solid mindset 🙂

Gaming

Programming

Reaching into nested properties and keeping them reactive?