Ternary conditional rendering or Show?

[frnsys]

I'm using version 1.6.9.

The documentation here says:

Solid's compiler is smart enough to optimally handle ternaries (a ? b : c) and boolean expressions (a && b).

I tried this simple example but it doesn't work (clicking on "CLOSED" doesn't change it to "OPEN"):

function Example(props: Props) {
  const [open, setOpen] = Solid.createSignal<boolean>(false);
  return open() ? <div>OPEN</div> : <div onClick={() => setOpen(true)}>CLOSED</div>
}

The equivalent code using Show does work, however. But the documentation makes it sound like the ternary version should work too.

After playing around with it I realized it has to be like this to work:

function Example(props: Props) {
  const [open, setOpen] = Solid.createSignal<boolean>(false);
  return <>{open() ? <div>OPEN</div> : <div onClick={() => setOpen(true)}>CLOSED</div>}</>
}

In retrospect this makes sense but (coming from React) wasn't clear at first. Is this something useful to add to the documentation, or is it better just to always use Show?

[atk]

Actually, you could also use {open() ? Open : "Closed"} instead of a fragment to make the statement reactive. However, using is obviously the more idiomatic solution.

[AlexErrant]

I think you need to put it in a fragment since {open() ? Open : "Closed"} isn't recognized as JSX.