Skip to main content

Conditional rendering

Conditional rendering is used to conditionally render an element to the dom. It uses the v:if directive which removes an element from the dom if the value is a falsy and append the element if otherwise.


The syntax of conditional rendering directive is v:if={<boolean>}.

Using conditional rendering

Here's an example on how to use conditional rendering.

import { component, useState } from '@monster-js/core';

export function greeting() {
const [toggle] = useState(this, true);

return <h1 v:if={toggle()}>Hello World!</h1>

component(greeting, 'app-greeting');