Korbs revised this gist . Go to revision
2 files changed, 70 insertions, 27 deletions
README.md(file created)
| @@ -0,0 +1,70 @@ | |||
| 1 | + | # Astro - If Else Statements | |
| 2 | + | ||
| 3 | + | ## Basic | |
| 4 | + | ||
| 5 | + | 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. | |
| 6 | + | ||
| 7 | + | Let's start out this example: | |
| 8 | + | ```jsx | |
| 9 | + | --- | |
| 10 | + | var UserLogin = false | |
| 11 | + | --- | |
| 12 | + | ||
| 13 | + | {UserLogin ? | |
| 14 | + | <a>Log Out</a> | |
| 15 | + | : | |
| 16 | + | <a>Sign in</a> | |
| 17 | + | } | |
| 18 | + | ``` | |
| 19 | + | ||
| 20 | + | Since the example above has it's variable set to `false`, this would show the "Sign In" button as a result. | |
| 21 | + | ||
| 22 | + | ## Custom Variable | |
| 23 | + | ||
| 24 | + | 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. | |
| 25 | + | ||
| 26 | + | Here's an example: | |
| 27 | + | ```jsx | |
| 28 | + | --- | |
| 29 | + | const AccountType = "external" | |
| 30 | + | --- | |
| 31 | + | ||
| 32 | + | { | |
| 33 | + | ()=> { | |
| 34 | + | if (UserLogin === "external") { | |
| 35 | + | return <p>Account Type: External</p> | |
| 36 | + | } else if (AccountType === "local") { | |
| 37 | + | return <p>Account Type: Local</p> | |
| 38 | + | } else { | |
| 39 | + | return <p>Account Type: Unknown</p> | |
| 40 | + | } | |
| 41 | + | } | |
| 42 | + | } | |
| 43 | + | ``` | |
| 44 | + | ||
| 45 | + | ## Array Includes | |
| 46 | + | Just like the custom variable section, we can use mostly the same way to check if an item is included with an array. | |
| 47 | + | ||
| 48 | + | Create an array, for example: | |
| 49 | + | ```jsx | |
| 50 | + | var Badges = ["Admin", "Moderator", "Premium"] | |
| 51 | + | ``` | |
| 52 | + | ||
| 53 | + | Then, check if the item exist in that array with the `includes` function: | |
| 54 | + | ```jsx | |
| 55 | + | {()=> {if (Badges.includes("Admin")) {return <p>Admin</p>}}} | |
| 56 | + | ``` | |
| 57 | + | ||
| 58 | + | Full example: | |
| 59 | + | ```jsx | |
| 60 | + | --- | |
| 61 | + | var Badges = ["Admin", "Moderator", "Premium"] | |
| 62 | + | --- | |
| 63 | + | ||
| 64 | + | <div class="user-badges"> | |
| 65 | + | {()=> {if (Badges.includes("Admin")) {return <p>Admin</p>}}} | |
| 66 | + | {()=> {if (Badges.includes("Moderator")) {return <p>Moderator</p>}}} | |
| 67 | + | {()=> {if (Badges.includes("Premium")) {return <p>Premium</p>}}} | |
| 68 | + | {()=> {if (Badges.includes("Newcomer")) {return <p>Newcomer</p>}}} | |
| 69 | + | </div> | |
| 70 | + | ``` | |
if-else-statment.astro (file deleted)
| @@ -1,27 +0,0 @@ | |||
| 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> | |
Korbs revised this gist . Go to revision
1 file changed, 11 insertions, 1 deletion
if-else-statment.astro
| @@ -1,5 +1,6 @@ | |||
| 1 | 1 | --- | |
| 2 | 2 | var UserLogin = false | |
| 3 | + | var Badges = ["Admin", "Moderator", "Premium"] | |
| 3 | 4 | --- | |
| 4 | 5 | ||
| 5 | 6 | <!-- Use this method if the results only returns "true" or "false" --> | |
| @@ -14,4 +15,13 @@ var UserLogin = false | |||
| 14 | 15 | return <p>Sign In</p> | |
| 15 | 16 | } | |
| 16 | 17 | } | |
| 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> | |
Korbs revised this gist . Go to revision
1 file changed, 17 insertions
if-else-statment.astro(file created)
| @@ -0,0 +1,17 @@ | |||
| 1 | + | --- | |
| 2 | + | var UserLogin = false | |
| 3 | + | --- | |
| 4 | + | ||
| 5 | + | <!-- Use this method if the results only returns "true" or "false" --> | |
| 6 | + | {UserLogin ? <p>Log Out</p> : <p>Sign in</p>} | |
| 7 | + | ||
| 8 | + | <!-- Use this method if the results return other results that are not labeled as "true" or "false --> | |
| 9 | + | { | |
| 10 | + | ()=> { | |
| 11 | + | if (UserLogin === "external") { | |
| 12 | + | return <p>Log Out</p> | |
| 13 | + | } else { | |
| 14 | + | return <p>Sign In</p> | |
| 15 | + | } | |
| 16 | + | } | |
| 17 | + | } | |