SolidJS•3mo ago

Show Callback with explicit condition

Hi, wondering if possible to use Show with callback and have condition explicity, for example false or undefined, not just any falsy value. imagine for example ts

type T = number | undefined

const items: readonly [] = ...
<For each={items} fallback="...">
  {item=><Show when={item===undefined ? false : item}>
    {value=> value}
  </Show>
</For>

type T = number | undefined

const items: readonly [] = ...
<For each={items} fallback="...">
  {item=><Show when={item===undefined ? false : item}>
    {value=> value}
  </Show>
</For>

For all numbers, including zero, I would like for value to be rendered. For now I am using Show with no callback and passing boolean to when prop and then a ! non null assertion when using value. But wondering if maybe there's a smoother way? Cheers

10 Replies

Alex Lohr•3mo ago

Just use <Show when={item !== undefined}>?

MaxOP•3mo ago

I tried but I think then the callback arg provided is the boolean result of that expression rather than the value itself

Alex Lohr•3mo ago

Sorry, in that case, use {item !== undefined && item}

MaxOP•3mo ago

thanks, I still tried, but I think because the value , so item here above, is 0, show is still showing the fallback, what I think is that since value is still falsy if returning item and item is 0.

Madaxen86•3mo ago

Well 0 is falsy in JS by definition but "0" is truthy so this would work: {item !== undefined && item.toString()} turn item to string or when={item !== undefined && (item || "0") } will value will be number|"0"

MaxOP•3mo ago

ahah thats a pretty fun solution but I cant convert all to strings and back to numbers, it's all sorts of data types anway. Thanks tho Think not using the callback version or having a look at Switch and Match may work

Madaxen86•3mo ago

Well then the second version might be good which keeps the type of item except turn 0 to "0"

MaxOP•3mo ago

yea thanks, it makes sense. But I think it is simpler to just use the non callback version of show. I think for performance its same as well since non callback version you still reference the signal wherever you use

Alex Lohr•3mo ago

Why don't you just use <Show when={item !== undefined}><>{item}</></Show>?

MaxOP•3mo ago

Yes, that what I'm using, it's what I was calling the non callback version of Show, that's right yeah? Actually, I am using callback but ignoring the returned value as its boolean, so it actually looks like

<Show when={props.values()[source]?.[column.key]?.value() !== undefined}>
  {(...[]) => {
    const value = createMemo(
      () => props.values()[source]?.[column.key]?.value()!,
    );
    return {
      // ... use value as needed 
      // switch cases in match 
    };
  }}
</Show>;

<Show when={props.values()[source]?.[column.key]?.value() !== undefined}>
  {(...[]) => {
    const value = createMemo(
      () => props.values()[source]?.[column.key]?.value()!,
    );
    return {
      // ... use value as needed 
      // switch cases in match 
    };
  }}
</Show>;

where I use createMemo to get an accessor to the value cause it's used a lot and typing the whole thing would be a bit messy. Still, I'm not sure if there are performance issues, I was looking at the 1.7 changelog to Show with non keyed callback and granular update. But thinking its the same performance as value memo should only update if the actual value updates. Was wondering if should be using the result from show (callback arg) somewhere but seems to work. I was also thinking I could just render the children as an immediately invoked function instead of callback, I cant however wrap my head around what the differences would be in terms of solid and its reactivity. So any input there would be helpful if you have, thanks!

Gaming

Programming

Show Callback with explicit condition