Revision of Astro: If Else Statement

Korbs revised this gist 1 month ago. Go to revision

1 file changed, 15 insertions

README.md

			@@ -19,6 +19,21 @@ var UserLogin = false
19	19
20	20		Since the example above has it's variable set to `false`, this would show the "Sign In" button as a result.
21	21
	22	+	## Skip False Statement
	23	+
	24	+	I find myself using `: null` a lot for false statements, when I don't plan to do anything with a false statement. I would recommend using `&&` to help with writing less code.
	25	+
	26	+	For example, we'll check if a variable is true, in this case `UserLogin`:
	27	+	```jsx
	28	+	---
	29	+	var UserLogin = false
	30	+	---
	31	+
	32	+	{UserLogin && <p>Welcome back!</p>}
	33	+	```
	34	+
	35	+	If the variable to found to be false, then nothing will be returned.
	36	+
22	37		## Custom Variable
23	38
24	39		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.

Korbs revised this gist 9 months ago. 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 9 months ago. 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 11 months ago. 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	+	}

Newer Older