How to conditionally create child based on state?

[bobinspace]

I would like to create a child only when a boolean state is true. I attempted to do that by doing something like the following, as suggested by the AI chatbot on the vanjs site:
Component = () => div(() => state.val ? div("Child") : null)
However, I notice that once the state becomes false, toggling it back to true doesn't create the child.

If I replace null with [], I get the desired effect. Is that the correct way?

[bleistivt]

Yes, but that will use the stringification of [] which is just the empty string so you could also use "".

[Tao-VanJS]

In VanJS, returning null or undefined for state-derived child nodes explicitly means you want to permanently delete the node, and don't ever want to bring it back.

See Section Removing a DOM node of VanJS Tutorial.

[bobinspace]

Can I think of null as being not just removing the node from the DOM, but more importantly, "Removing this component instance from the list of subscribers to changes in said state(s)"? The latter fits my mental model of how it causes the deletion to be permanent, but I am not sure if it's correct.

[Tao-VanJS]

Yep, if the DOM node doesn't exist anymore, of course it won't be able to listen to state changes.