# Astro - If Else Statements

## Basic

With a `true` or `false` statement, we can simply create something like a link or button that changes depending on if the user is signed in. 

Let's start out this example:
```jsx
---
var UserLogin = false
---

{UserLogin ? 
  <a>Log Out</a>
  :
  <a>Sign in</a>
}
```

Since the example above has it's variable set to `false`, this would show the "Sign In" button as a result.

## Custom Variable

If you're not using the basic `true`/`false` strings for your variable and are using a custom variable instead as you may have more than just two conditions to handle. We can check if the variable matches a string instead.

Here's an example:
```jsx
---
const AccountType = "external"
---

{ 
  ()=> {
    if (UserLogin === "external") {
      return <p>Account Type: External</p>
    } else if (AccountType === "local") {
      return <p>Account Type: Local</p>
    } else {
      return <p>Account Type: Unknown</p>
    }
  }
}
```

## Array Includes
Just like the custom variable section, we can use mostly the same way to check if an item is included with an array. 

Create an array, for example:
```jsx
var Badges = ["Admin", "Moderator", "Premium"]
```

Then, check if the item exist in that array with the `includes` function:
```jsx
{()=> {if (Badges.includes("Admin")) {return <p>Admin</p>}}}
```

Full example:
```jsx
---
var Badges = ["Admin", "Moderator", "Premium"]
---

<div class="user-badges">
        {()=> {if (Badges.includes("Admin")) {return <p>Admin</p>}}}
        {()=> {if (Badges.includes("Moderator")) {return <p>Moderator</p>}}}
        {()=> {if (Badges.includes("Premium")) {return <p>Premium</p>}}}
        {()=> {if (Badges.includes("Newcomer")) {return <p>Newcomer</p>}}}
</div>
```