SolidJS•3y ago

Conditional rendering approach

Hi, it's often the case there is a need to conditionally render components given data that may be undefined. Given how Solid handles reactivity it seems it is not type safe to use boolean evaluation or ternary statement to conditionally render something. The Show component seems to solve this issue but will only provide a callback to render children of keyed is true, I am unsure of the consequences of using keyed. Please see the example below which should illustrate the question fairly clearly. Thanks, any information would be cool. https://playground.solidjs.com/anonymous/f6cab1e1-3349-450c-b786-d082187ff209

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

4 Replies

milomg•3y ago

It seems like you've discovered the consequences of keyed: the entire show component rerenders when your variable changes (which is likely not what you want). I'd recommend using something like option 1 with a few exclamation marks to help fix ts. In a future version we're hoping to make a non keyed show component for ts

MaxOP•3y ago

Okay cool thanks, so it's a bit like the difference between For and Index for collections yea? I'll copy this that I'll probably use in case anyone else needs

const data: Accessor<number | undefined> = () => 2;

const is = <T extends unknown>(
  accessor: Accessor<T | undefined>
): accessor is Accessor<T> => accessor()!==undefined;

const element = <div>{is(data) && data()}</div>;

const data: Accessor<number | undefined> = () => 2;

const is = <T extends unknown>(
  accessor: Accessor<T | undefined>
): accessor is Accessor<T> => accessor()!==undefined;

const element = <div>{is(data) && data()}</div>;

Unknown User•3y ago

Message Not Public

MaxOP•3y ago

Nice thank you I didn't look at stores before. That's cool how it works!

Gaming

Programming

Conditional rendering approach