if-else-statment.astro
· 965 B · Text
Raw
---
var UserLogin = false
var Badges = ["Admin", "Moderator", "Premium"]
---
<!-- Use this method if the results only returns "true" or "false" -->
{UserLogin ? <p>Log Out</p> : <p>Sign in</p>}
<!-- Use this method if the results return other results that are not labeled as "true" or "false -->
{
()=> {
if (UserLogin === "external") {
return <p>Log Out</p>
} else {
return <p>Sign In</p>
}
}
}
<!-- With an array, you can check what's included and use the ".includes" function -->
<!-- Includes Function: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes -->
<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>
| 1 | --- |
| 2 | var UserLogin = false |
| 3 | var Badges = ["Admin", "Moderator", "Premium"] |
| 4 | --- |
| 5 | |
| 6 | <!-- Use this method if the results only returns "true" or "false" --> |
| 7 | {UserLogin ? <p>Log Out</p> : <p>Sign in</p>} |
| 8 | |
| 9 | <!-- Use this method if the results return other results that are not labeled as "true" or "false --> |
| 10 | { |
| 11 | ()=> { |
| 12 | if (UserLogin === "external") { |
| 13 | return <p>Log Out</p> |
| 14 | } else { |
| 15 | return <p>Sign In</p> |
| 16 | } |
| 17 | } |
| 18 | } |
| 19 | |
| 20 | <!-- With an array, you can check what's included and use the ".includes" function --> |
| 21 | <!-- Includes Function: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes --> |
| 22 | <div class="user-badges"> |
| 23 | {()=> {if (Badges.includes("Admin")) {return <p>Admin</p>}}} |
| 24 | {()=> {if (Badges.includes("Moderator")) {return <p>Moderator</p>}}} |
| 25 | {()=> {if (Badges.includes("Premium")) {return <p>Premium</p>}}} |
| 26 | {()=> {if (Badges.includes("Newcomer")) {return <p>Newcomer</p>}}} |
| 27 | </div> |