diff --git a/src/components/TaskGame/components/Destructuring.js b/src/components/TaskGame/components/Destructuring.js
index 2327ea0..433518c 100644
--- a/src/components/TaskGame/components/Destructuring.js
+++ b/src/components/TaskGame/components/Destructuring.js
@@ -11,10 +11,9 @@ function Destructuring(props) {
color3: "green",
};
- // TODO: Find the Bugs
- var color1 = colors.color1,
- color2 = colors.color1,
- color3 = colors.color1;
+ // TODO: Find the Bugs (Solved)
+ // Note: Split colors into vars for component style
+ var { color1, color2, color3 } = colors
return (
diff --git a/src/components/TaskGame/components/Fetching.js b/src/components/TaskGame/components/Fetching.js
index d9994f3..c77c18a 100644
--- a/src/components/TaskGame/components/Fetching.js
+++ b/src/components/TaskGame/components/Fetching.js
@@ -14,12 +14,13 @@ function Fetching(props) {
fetch(pokemonURL)
.then((res) => res.json())
.then((resJson) => {
- // TODO: Find the Bugs
- const pokemonList = resJson;
+ // TODO: Find the Bugs (Solved)
+ // Note: Need to get the results
+ const pokemonList = resJson.results;
- // TODO: Find the Bugs
- // setPokemonList will broken the page
- // setPokemonList(pokemonList);
+ // TODO: Find the Bugs (Solved)
+ // Note: useState setter requires correct object which is list of names, not object
+ setPokemonList(pokemonList);
console.log(pokemonList);
});
}, []);
diff --git a/src/components/TaskGame/components/Props.js b/src/components/TaskGame/components/Props.js
index 48ddb6c..699652f 100644
--- a/src/components/TaskGame/components/Props.js
+++ b/src/components/TaskGame/components/Props.js
@@ -19,16 +19,19 @@ function Props(props) {
- {/* TODO: Find the Bugs */}
+ {/* TODO: Find the Bugs (Solved) */}
+ {/* Note: change prop using var */}
- {/* TODO: Find the Bugs */}
-
+ {/* TODO: Find the Bugs (Solved) */}
+ {/* Note: change prop using var */}
+
- {/* TODO: Find the Bugs */}
-
+ {/* TODO: Find the Bugs (Solved) */}
+ {/* Note: change prop using var */}
+
diff --git a/src/components/TaskGame/components/UseEffect.js b/src/components/TaskGame/components/UseEffect.js
index 6ad8146..52625e9 100644
--- a/src/components/TaskGame/components/UseEffect.js
+++ b/src/components/TaskGame/components/UseEffect.js
@@ -8,10 +8,11 @@ function UseEffect(props) {
const [count, setCount] = useState(0);
- // TODO: Find the Bugs
+ // TODO: Find the Bugs (Solved)
+ // Note: without depedency, useEffect will triggered on every update (hence infinite loop)
useEffect(() => {
setCount(Math.random);
- });
+ }, []);
return (
diff --git a/src/components/TaskGame/components/UseState.js b/src/components/TaskGame/components/UseState.js
index 8c5590e..2c3129b 100644
--- a/src/components/TaskGame/components/UseState.js
+++ b/src/components/TaskGame/components/UseState.js
@@ -2,8 +2,9 @@ import { Button, Divider } from "antd";
function UseState(props) {
const handleNext = () => {
- // TODO: Find the Bugs
- props.setStep(1);
+ // TODO: Find the Bugs (Solved)
+ // Note: Next step of this page (index 2) is page index 3 not 1
+ props.setStep(3);
};
return (
diff --git a/src/components/TaskGame/components/UseStateClosure.js b/src/components/TaskGame/components/UseStateClosure.js
index f6230ed..8be71c0 100644
--- a/src/components/TaskGame/components/UseStateClosure.js
+++ b/src/components/TaskGame/components/UseStateClosure.js
@@ -11,8 +11,9 @@ function UseStateClosure(props) {
const handleClickAsync = () => {
console.log("handlernya sudah onclick");
setTimeout(() => {
- // TODO: Find the Bugs
- setCount(count + 1);
+ // TODO: Find the Bugs (Solved)
+ // Note: without using functional way, setCount closures and update the previous same value
+ setCount(count => count + 1);
}, 1000);
};