SolidJS•13mo ago

<Show> with number | null

What is the recommended way of using the Show component to conditionally render a number that can possibly be null? Currently, if you do the following, the number won't be rendered if its value is zero.

<Show when={nullableValue()}>
  {(value) => <>{value()}</>}
</Show>

<Show when={nullableValue()}>
  {(value) => <>{value()}</>}
</Show>

6 Replies

Jakob•13mo ago

nullableValue() !== null theres not much else you can do if value is the nullable signal then{value()} instead of the whole Show is enough, it wont render "null"

deluksic•13mo ago

I would argue !== null is actually the only truly correct thing to do (regardless of solidjs). Unfortunately, typescript eslint plugin does not warn about this because it does not know when is a context where it should complain. ok yeah, with callback form, it gets tricky indeed

lumenianOP•13mo ago

But that makes it impossible to access the underlying number value without doing nullableValue()! which is an antipattern, I believe.

mdynnl•13mo ago

you can wrap the typechecked value with something truthy inside when and then unwrap it in the callback https://playground.solidjs.com/anonymous/4ef10b8e-d8b0-4522-a710-ed0fad01b959

lumenianOP•13mo ago

Thank you, looks interesting. It's a shame that all this complexity is required for such a basic thing, though.

mdynnl•13mo ago

FWIW, NaN part was what i introduced with getting the value from the input in your case, it would be

<Show
  when={((value) => value != null && (() => value))(count())}
>
  {(fn, value = () => fn()()) => {
    return <div>{value()}</div>;
  }}
</Show>

<Show
  when={((value) => value != null && (() => value))(count())}
>
  {(fn, value = () => fn()()) => {
    return <div>{value()}</div>;
  }}
</Show>

if you really cares about being correct in terms of typescript, it's a good trade IMO, it's a limitation of typescript after all keyed version

<Show when={((value) => value != null && (() => value))(count())} keyed>
  {(accessor) => {

    return <div>{accessor()}</div>;
  }}
</Show>

<Show when={((value) => value != null && (() => value))(count())} keyed>
  {(accessor) => {

    return <div>{accessor()}</div>;
  }}
</Show>

Gaming

Programming

<Show> with number | null