Show/Hide formula

conditional rendering is a powerful feature that allows you to show or hide elements based on specific conditions. This is achieved using the show/hide formula. This formula evaluates a condition and determines whether an element should be displayed or not.

Basic Concept

The show/hide formula is based on a boolean expression. If the expression is truthy ( see note below ) to true , the element is shown; if it evaluates to false , the element is hidden.

Note: toddle uses a truthy concept similar to that of JavaScript. There exists six falsy values: false, 0, '' (empty string), null, undefined, and NaN . All other values are truthy.

Conditional rendering

Using toddle's show/hide formula to conditionally render content differs from using classes or style variables to set an element to `display: none` as the element is truly not rendered. A component not rendered due to itself or one of its parents having a falsy show/hide condition will not have its APIs, onLoad, or any other action firing. It's as if it was not there.

Caveats

As mentioned above, an element will be completely removed and unmounted when its condition is set to false. This means that APIs, onLoad, and creating all the DOM nodes will run again when the condition is true, once again. Doing this continuously can lead to poor performance. Instead, in rare cases, you can instead hide an element with ` display: none ` to still push it to the DOM, but not render it, or ` visibility: hidden ` to render the element, but not show it.