Skip to main content

Conditional Rendering

EDL provides several ways to conditionally render content using the :if prop.

Basic Usage​

Use :if on any component or Fragment to conditionally render it:

<Text :if={isVisible}>
  This text only shows when isVisible is true
</Text>

With Fragment​

Use Fragment to conditionally render multiple elements:

<Fragment :if={isLoggedIn}>
  <Text>Welcome back!</Text>
  <Button action={logout}>Logout</Button>
</Fragment>

With Else Condition​

You can implement else conditions using multiple :if statements:

<Fragment>
  <Text :if={isLoading}>Loading...</Text>
  <Text :if={!isLoading}>Content loaded!</Text>
</Fragment>

With Complex Conditions​

<Fragment>
  <Text :if={status === 'loading'}>Loading...</Text>
  <Text :if={status === 'error'}>Error occurred!</Text>
  <Text :if={status === 'success'}>Data loaded successfully!</Text>
</Fragment>

Best Practices​

  • Use Fragment to group multiple elements under a single condition
  • Keep conditions simple and readable
  • Consider extracting complex conditions into state variables