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); };