Expressions

{props.tags.length}         {/* renders the number of tags */}
{[1, 2, 3].length}          {/* renders 3 */}

{props.user.name}
{props['user-email']}
{props.items[0].title}

{ 2 + 3 }     {/* 5  */}
{ 10 - 4 }    {/* 6  */}
{ 10 / 2 }    {/* 5  */}
{ 10 % 3 }    {/* 1  */}
{ 5 * 4 }     {/* 20 */}

<If condition={props.numUsers > 10}>
  Content for more than 10 users
</If>

<If condition={props.score >= 75}>
  Content for scores 75 and above
</If>

<If condition={props.isActive && props.hasAccess}>
  Content for active users with access
</If>

<If condition={props.isAdmin || props.isModerator}>
  Content for admins or moderators
</If>

<If condition={!props.isBanned}>
  Content for users who are not banned
</If>

{ upper(props.name) }          {/* ALICE */}
{ truncate(props.bio, 100) }   {/* first 100 chars + "..." */}

<If condition={(props.age >= 18 && props.isMember) || props.hasGuestPass}>
  Welcome to the event!
</If>
<ElseIf condition={props.age >= 18 && !props.isMember}>
  Please consider becoming a member to enjoy full benefits.
</ElseIf>
<Else>
  Sorry, you must be at least 18 years old to attend.
</Else>