SolidJS•2y ago

Show-tag with callback for multiple values

hi all 👋 Is there currently a way to use the Show tag in the callback-form to validate and pass on multiple values? Something like

<Show when={[var1, var2]} keyed>
  {
    ([var1, var2]) => (...var1_and_var2_are_trueish)
  }
</Show>

<Show when={[var1, var2]} keyed>
  {
    ([var1, var2]) => (...var1_and_var2_are_trueish)
  }
</Show>

11 Replies

thetarnav•2y ago

that's my guess when={a() && b() && [a(), b()] as const}

bigmistqkeOP•2y ago

that almost seem to do the trick

bigmistqkeOP•2y ago

would you know a way to keep the types seperate?

thetarnav•2y ago

no clue why && wasn't working, but this does

const a = () => ({} as any as string | null);
const b = () => ({} as any as Date | null);

return (
  <Show when={a() && b() ? ([a()!, b()!] as const) : null} keyed>
    {([a, b]) => {
      return "";
    }}
  </Show>
);

const a = () => ({} as any as string | null);
const b = () => ({} as any as Date | null);

return (
  <Show when={a() && b() ? ([a()!, b()!] as const) : null} keyed>
    {([a, b]) => {
      return "";
    }}
  </Show>
);

bigmistqkeOP•2y ago

nice thanks!! hu, strange. it was typed correctly for a second and then it lost the typings again

bigmistqkeOP•2y ago

bigmistqkeOP•2y ago

i guess it's a bit too much for tsc

thetarnav•2y ago

as const is needed to make it into a tuple

bigmistqkeOP•2y ago

ooo ok gotcha yes that's it lol

thetarnav•2y ago

Also Show accepts a generic type too <Show<[string, Dimensions]> when={...} />

bigmistqkeOP•2y ago

nice one to know component with generic looks funky

Gaming

Programming

Show-tag with callback for multiple values