JSFiddle - React, Tailwind, and code Playground

author(s): Tao Xin

HTML

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/vanjs-org/van/public/van-1.6.2.nomodule.min.js"></script>

JavaScript

const {button, div, span} = van.tags

const ConditionalChildren = () => {
  const visible = van.state(true)
  return div(
    button({onclick: () => visible.val = !visible.val}, () => visible.val ? "Hide" : "Show"),
    div({style: "display: flex; gap: 2em;"},
      div("Return null:", div(() => visible.val ? span("đź‘‹Hello") : null)),
      div('Return "":', div(() => visible.val ? span("đź‘‹Hello") : "")),
    ),
  )
}

van.add(document.body, ConditionalChildren())