From fecbce284b12cc51811b46761fdd5180c47f886b Mon Sep 17 00:00:00 2001 From: Farhaan Nishtar Date: Mon, 14 Mar 2022 15:27:04 -0400 Subject: [PATCH 1/5] Created Counter component --- src/components/Counter.js | 12 ++++++++---- src/components/Input.js | 12 ++++++++---- 2 files changed, 16 insertions(+), 8 deletions(-) diff --git a/src/components/Counter.js b/src/components/Counter.js index 447a5e849..12f8b89e7 100644 --- a/src/components/Counter.js +++ b/src/components/Counter.js @@ -46,32 +46,36 @@ STEP 6: This click handler needs to use 'setCount' to set the 'count' to be zero again. */ -import React from 'react'; /* STEP 0 */ +import React, {useState} from 'react'; /* STEP 0 */ export default function Counter() { /* STEP 1 */ + const [count, setCount] = useState(0); const increment = () => { /* STEP 4 */ + setCount(count+1); }; const decrement = () => { /* STEP 5 */ + setCount(count-1); }; const reset = () => { /* STEP 6 */ + setCount(0); }; const style = { fontSize: '1.5em', marginBottom: '0.3em', - color: 'royalblue', /* STEP 2 */ + color: count % 2 === 0 ? 'royalblue' : 'crimson' /* STEP 2 */ }; return (

Counter

- Number 0 is even {/* STEP 3 */} + Number {count} is {count % 2 === 0 ? "even" : "odd"} {/* STEP 3 */}
@@ -80,4 +84,4 @@ export default function Counter() {
); -} +} \ No newline at end of file diff --git a/src/components/Input.js b/src/components/Input.js index 36bf8fe03..ae7eabb12 100644 --- a/src/components/Input.js +++ b/src/components/Input.js @@ -34,32 +34,36 @@ STEP 6: We need to add an extra prop to the element like so: value={inputValue} */ -import React from 'react'; /* STEP 0 */ +import React, {useState} from 'react'; /* STEP 0 */ export default function Input() { /* STEP 1 */ - + const [inputValue, setInputValue] = useState(''); const changeInput = evt => { // When the input changes, its whole value can be found inside the event object. // Log out the synthetic event object 'evt' and see for yourself. const { value } = evt.target; /* STEP 4 */ + setInputValue(value); }; const reset = () => { /* STEP 5 */ + setInputValue(''); }; const style = { fontSize: '1.5em', marginBottom: '0.3em', - color: 'royalblue', /* STEP 2 */ + color: inputValue > 10 ? 'crimson' : 'royalblue', /* STEP 2 */ }; return (

Input

-
{/* STEP 3 */} + {/* STEP 3: + Interpolate the value of the input inside this
. How can we make it show in ALL CAPS? */} +
{inputValue.toUpperCase()}
{/* STEP 3 */}
{/* STEP 6 */} From 31e36bb6a65f37829ec3c5a39e7d8d82db3d4478 Mon Sep 17 00:00:00 2001 From: Farhaan Nishtar Date: Tue, 15 Mar 2022 09:30:02 -0400 Subject: [PATCH 2/5] Created Programmers component --- src/components/Input.js | 5 ++++- src/components/Moods.js | 11 +++++++---- src/components/Programmers.js | 20 ++++++++++++++------ 3 files changed, 25 insertions(+), 11 deletions(-) diff --git a/src/components/Input.js b/src/components/Input.js index ae7eabb12..345c6e979 100644 --- a/src/components/Input.js +++ b/src/components/Input.js @@ -65,7 +65,10 @@ export default function Input() { Interpolate the value of the input inside this
. How can we make it show in ALL CAPS? */}
{inputValue.toUpperCase()}
{/* STEP 3 */}
- {/* STEP 6 */} + {/* STEP 6: + For the input to reset correctly, it needs to "drink" its value from state! + We need to add an extra prop to the element like so: value={inputValue}*/} + {/* STEP 6 */}
diff --git a/src/components/Moods.js b/src/components/Moods.js index 98b49467f..87f21d651 100644 --- a/src/components/Moods.js +++ b/src/components/Moods.js @@ -28,7 +28,7 @@ STEPS 4, 5, 6: Inside these click handlers set the correct mood, using 'setMood' and the variables below the imports. */ -import React from 'react'; /* STEP 0 */ +import React, {useState} from 'react'; /* STEP 0 */ const initialMood = 'Not sure how I feel'; const happyMood = 'Quite happy!'; @@ -36,27 +36,30 @@ const sadMood = 'Rather sad'; export default function Moods() { /* STEP 1 */ - + const [mood, setMood] = useState(initialMood); const makeHappy = () => { /* STEP 4 */ + setMood(happyMood); }; const makeSad = () => { /* STEP 5 */ + setMood(sadMood); }; const reset = () => { /* STEP 6 */ + setMood(initialMood); }; const style = { fontSize: '1.5em', marginBottom: '0.3em', - color: 'crimson', /* STEP 2 */ + color: (mood === happyMood) ? 'royalblue' : 'crimson', /* STEP 2 */ }; return (

Moods

-
Not sure how I feel
{/* STEP 3 */} +
{mood}
{/* STEP 3 */}
diff --git a/src/components/Programmers.js b/src/components/Programmers.js index e34c4f392..57075b917 100644 --- a/src/components/Programmers.js +++ b/src/components/Programmers.js @@ -11,10 +11,10 @@ We can only feature one awesome programmer at a time. Find comments below to help you along. */ -import React from 'react'; +import React, {useState} from 'react'; // Use this variable ONLY to initialize a slice of state! -// There is something in the JSX right now breaking this rule... +// There is something in the JSX right now breaking this rule...f export const listOfAwesome = [ { id: '1', name: 'Ada Lovelace' }, { id: '2', name: 'Grace Hopper' }, @@ -27,6 +27,8 @@ export const listOfAwesome = [ export default function Programmers() { // We'll have to use the state hook twice, as we need two slices of state. // The programmers list on the one hand, and the id of the featured programmer on the other. + const [programmers, setProgrammers] = useState(listOfAwesome); + const [featured, setFeatured] = useState(null); const getNameOfFeatured = () => { // Leave this for last! @@ -34,12 +36,18 @@ export default function Programmers() { // It's going to utilize both slices of state to return the _name_ of the featured dev. // The beauty of closures is that we can "see" both slices of state from this region // of the program, without needing to inject the information through arguments. + for (let i = 0; i < programmers.length; i++) { + if (programmers[i].id === featured) { + return programmers[i].name; + } + } + return programmers.find(programmer => programmer.id === featured ? programmer.name : null); }; const style = { fontSize: '1.5em', marginTop: '0.5em', - color: 'royalblue', // 🤔 color turns to gold, when celebrating + color: featured ? 'gold' : 'royalblue', // 🤔 color turns to gold, when celebrating }; return ( @@ -50,9 +58,9 @@ export default function Programmers() { /* Nasty bug! We should map over a slice of state, instead of 'listOfAwesome'. We might think: "it works, though!" But if the list of programmers is not state, we could never add or edit programmers in the future. The list would be a static thing." */ - listOfAwesome.map(dev => + programmers.map(dev =>
- {dev.name} + {dev.name}
) } @@ -62,7 +70,7 @@ export default function Programmers() { // Ternaries are fantastic to render "one thing or the other" depending on the "truthiness" of something. // Pseudo-code: if the currently featured id is truthy render text 1, otherwise render text 2. // Replace the hard-coded false with the correct variable. - false + featured ? `🎉 Let's celebrate ${getNameOfFeatured()}! 🥳` : 'Pick an awesome programmer' } From 9263480f8af8c4d7e08ae93df18d3474a04e0640 Mon Sep 17 00:00:00 2001 From: Farhaan Nishtar Date: Tue, 15 Mar 2022 11:32:21 -0400 Subject: [PATCH 3/5] Completed Square component --- src/components/Spinner.js | 15 +++++++++------ src/components/Squares.js | 13 ++++++++++--- 2 files changed, 19 insertions(+), 9 deletions(-) diff --git a/src/components/Spinner.js b/src/components/Spinner.js index d0326fd34..11dde5421 100644 --- a/src/components/Spinner.js +++ b/src/components/Spinner.js @@ -37,23 +37,26 @@ STEP 4: Do you remember the operator we use to do "not"? */ -import React from 'react'; /* STEP 0 */ +import React, {useState} from 'react'; /* STEP 0 */ export default function Spinner() { -/* STEP 1 */ - + /* STEP 1 */ + const [spinnerOn, setSpinnerOn] = useState(true); const toggleSpinner = () => { - /* STEP 4 */ + /* STEP 4 */ + setSpinnerOn(!spinnerOn); }; return (

Spinner

{ - true &&
--+--
/* STEP 2 */ + spinnerOn &&
--+--
/* STEP 2 */ } + {/* STEP 3: + Use a ternary expression inside the text of the button, to render "Hide" or "Show" depending on the value of 'spinnerOn'. */}
); diff --git a/src/components/Squares.js b/src/components/Squares.js index 25ab72546..5039e62d2 100644 --- a/src/components/Squares.js +++ b/src/components/Squares.js @@ -14,7 +14,7 @@ Only one square (or none) can be active at any given point. Find comments below to help you along. */ -import React from 'react'; +import React, {useState} from 'react'; // Use this variable ONLY to initialize a slice of state! const listOfSquareIds = ['sqA', 'sqB', 'sqC', 'sqD']; @@ -24,13 +24,15 @@ export default function Squares() { // 'activeSquare'. One holds the _array_ of square ids, and the other keeps track // of the currently active square. On page load there's no active square, // so the value of 'activeSquare' should be null. + const [squares, setSquares] = useState(listOfSquareIds); + const [activeSquare, setActiveSquare] = useState(null); const getClassName = id => { // This is NOT a click handler but a helper, used inside the JSX (see below). // It should return a string containing the class name of 'active', if the id passed // as the argument matches the active square in state, empty string otherwise. // Right-click and "inspect element" on the square to see its effect. - return '' + return id === activeSquare ? 'active' : ''; }; const markActive = id => { @@ -38,6 +40,11 @@ export default function Squares() { // Set the id argument to become the active id in state // (unless it already is, in which case we should reset // the currently active square id back to initial state). + if (id === activeSquare) { + setActiveSquare(null) + } else { + setActiveSquare(id); + } }; return ( @@ -48,7 +55,7 @@ export default function Squares() { // Nasty bug! We should map over a slice of state, instead of 'listOfSquareIds'. // We might say: "it works, though!" But if the list of squares is not state, // we could never add squares, change squares or remove squares in the future. Fix! - listOfSquareIds.map(id => + squares.map(id =>
Date: Sat, 19 Mar 2022 18:08:58 -0400 Subject: [PATCH 4/5] Created Input component --- src/components/Counter.js | 99 +++++++++++++++++++++++++++++++++++++-- src/components/Input.js | 12 ++--- src/components/Squares.js | 1 + 3 files changed, 99 insertions(+), 13 deletions(-) diff --git a/src/components/Counter.js b/src/components/Counter.js index 12f8b89e7..0234a7267 100644 --- a/src/components/Counter.js +++ b/src/components/Counter.js @@ -51,14 +51,13 @@ import React, {useState} from 'react'; /* STEP 0 */ export default function Counter() { /* STEP 1 */ const [count, setCount] = useState(0); - const increment = () => { /* STEP 4 */ - setCount(count+1); + setCount(count + 1); }; const decrement = () => { /* STEP 5 */ - setCount(count-1); + setCount(count - 1); }; const reset = () => { /* STEP 6 */ @@ -68,13 +67,14 @@ export default function Counter() { const style = { fontSize: '1.5em', marginBottom: '0.3em', - color: count % 2 === 0 ? 'royalblue' : 'crimson' /* STEP 2 */ + color: count % 2 === 0 ? 'royalblue' : "crimson", /* STEP 2 */ }; return (

Counter

+ {/* STEP 3: */} Number {count} is {count % 2 === 0 ? "even" : "odd"} {/* STEP 3 */}
@@ -84,4 +84,93 @@ export default function Counter() {
); -} \ No newline at end of file +} + + +// /* +// COUNTER Instructions + +// Watch this short video carefully, paying attention to the UI and Chrome Devtools: +// https://tk-assets.lambdaschool.com/59036a85-0980-42c8-81ad-9afc8354497f_counter-clip.gif + +// How many slices of state do you think are necessary to act as "sources of truth" for all +// the things that change in this widget? Give it some thought before continuing reading! + +// A naive developer might say 3 different slices: +// - The count +// - Whether the text is color crimson or royalblue +// - Whether the text reads "even" or "odd" + +// But a single slice of state is all that's needed here: the count! +// The other things can simply be _derived_ from the count itself. + +// STEP 0: +// Start by studying the component below, and importing the state hook. + +// STEP 1: +// Using the state hook, create a 'count', 'setCount' pair. +// The 'count' state should be initialized to the number zero. + +// STEP 2: +// The 'style' object has the 'color' property hard-coded to "royalblue". +// What the value of 'color' should be instead is a ternary expression that goes like this: +// If count is even, then "royalblue", else "crimson". + +// STEP 3: +// We need to replace some hard-coded info in the JSX with expressions, interpolated inside curly brackets. +// Start by replacing the character "0" with {count}. The 'count' slice of state is the source of truth here. +// Then, replace the word "even" with a ternary: {if count is even number, then string "even", else string "odd"}. + +// STEP 4: +// This click handler needs to use 'setCount' to schedule the 'count' to become the current 'count' plus one. +// These state changes are not synchronous: the updated count arrives on the next run of the Counter component. +// Do NOT simply do count++. The plus plus is forbidden! We never mutate a slice of state in place. Even if you could +// reassign a const, React would not be aware anything changed. Always use the state updater, passing in a new value. + +// STEP 5: +// This click handler needs to use 'setCount' to set the 'count' to be the current 'count' minus one. +// Do NOT do count--. That amounts to trying to mutate 'count' in place. This is the road to perdition. + +// STEP 6: +// This click handler needs to use 'setCount' to set the 'count' to be zero again. +// */ + +// import React, {useState} from 'react'; /* STEP 0 */ + +// export default function Counter() { +// /* STEP 1 */ +// const [count, setCount] = useState(0); + +// const increment = () => { +// /* STEP 4 */ +// setCount(count+1); +// }; +// const decrement = () => { +// /* STEP 5 */ +// setCount(count-1); +// }; +// const reset = () => { +// /* STEP 6 */ +// setCount(0); +// }; + +// const style = { +// fontSize: '1.5em', +// marginBottom: '0.3em', +// color: count % 2 === 0 ? 'royalblue' : 'crimson' /* STEP 2 */ +// }; + +// return ( +//
+//

Counter

+//
+// Number {count} is {count % 2 === 0 ? "even" : "odd"} {/* STEP 3 */} +//
+//
+// +// +// +//
+//
+// ); +// } \ No newline at end of file diff --git a/src/components/Input.js b/src/components/Input.js index 345c6e979..1921e2d6e 100644 --- a/src/components/Input.js +++ b/src/components/Input.js @@ -39,6 +39,7 @@ import React, {useState} from 'react'; /* STEP 0 */ export default function Input() { /* STEP 1 */ const [inputValue, setInputValue] = useState(''); + const changeInput = evt => { // When the input changes, its whole value can be found inside the event object. // Log out the synthetic event object 'evt' and see for yourself. @@ -49,26 +50,21 @@ export default function Input() { }; const reset = () => { /* STEP 5 */ - setInputValue(''); + setInputValue(""); }; const style = { fontSize: '1.5em', marginBottom: '0.3em', - color: inputValue > 10 ? 'crimson' : 'royalblue', /* STEP 2 */ + color: inputValue.length > 10 ? 'crimson' : 'royalblue', /* STEP 2 */ }; return (

Input

- {/* STEP 3: - Interpolate the value of the input inside this
. How can we make it show in ALL CAPS? */}
{inputValue.toUpperCase()}
{/* STEP 3 */}
- {/* STEP 6: - For the input to reset correctly, it needs to "drink" its value from state! - We need to add an extra prop to the element like so: value={inputValue}*/} - {/* STEP 6 */} + {/* STEP 6 */}
diff --git a/src/components/Squares.js b/src/components/Squares.js index 5039e62d2..a4fc34481 100644 --- a/src/components/Squares.js +++ b/src/components/Squares.js @@ -1,3 +1,4 @@ + /* SQUARES Instructions From 23be75dfc3c7104059d9d9db4363d19350fcea3d Mon Sep 17 00:00:00 2001 From: Farhaan Nishtar Date: Sun, 20 Mar 2022 10:46:40 -0400 Subject: [PATCH 5/5] Completed Squares Component --- src/components/Counter.js | 91 +---------------------------------- src/components/Moods.js | 3 +- src/components/Programmers.js | 19 +++++--- src/components/Spinner.js | 72 +++++++++++++++++++++++++-- src/components/Squares.js | 83 ++++++++++++++++++++++++++++++-- 5 files changed, 160 insertions(+), 108 deletions(-) diff --git a/src/components/Counter.js b/src/components/Counter.js index 0234a7267..0ccfa7272 100644 --- a/src/components/Counter.js +++ b/src/components/Counter.js @@ -84,93 +84,4 @@ export default function Counter() {
); -} - - -// /* -// COUNTER Instructions - -// Watch this short video carefully, paying attention to the UI and Chrome Devtools: -// https://tk-assets.lambdaschool.com/59036a85-0980-42c8-81ad-9afc8354497f_counter-clip.gif - -// How many slices of state do you think are necessary to act as "sources of truth" for all -// the things that change in this widget? Give it some thought before continuing reading! - -// A naive developer might say 3 different slices: -// - The count -// - Whether the text is color crimson or royalblue -// - Whether the text reads "even" or "odd" - -// But a single slice of state is all that's needed here: the count! -// The other things can simply be _derived_ from the count itself. - -// STEP 0: -// Start by studying the component below, and importing the state hook. - -// STEP 1: -// Using the state hook, create a 'count', 'setCount' pair. -// The 'count' state should be initialized to the number zero. - -// STEP 2: -// The 'style' object has the 'color' property hard-coded to "royalblue". -// What the value of 'color' should be instead is a ternary expression that goes like this: -// If count is even, then "royalblue", else "crimson". - -// STEP 3: -// We need to replace some hard-coded info in the JSX with expressions, interpolated inside curly brackets. -// Start by replacing the character "0" with {count}. The 'count' slice of state is the source of truth here. -// Then, replace the word "even" with a ternary: {if count is even number, then string "even", else string "odd"}. - -// STEP 4: -// This click handler needs to use 'setCount' to schedule the 'count' to become the current 'count' plus one. -// These state changes are not synchronous: the updated count arrives on the next run of the Counter component. -// Do NOT simply do count++. The plus plus is forbidden! We never mutate a slice of state in place. Even if you could -// reassign a const, React would not be aware anything changed. Always use the state updater, passing in a new value. - -// STEP 5: -// This click handler needs to use 'setCount' to set the 'count' to be the current 'count' minus one. -// Do NOT do count--. That amounts to trying to mutate 'count' in place. This is the road to perdition. - -// STEP 6: -// This click handler needs to use 'setCount' to set the 'count' to be zero again. -// */ - -// import React, {useState} from 'react'; /* STEP 0 */ - -// export default function Counter() { -// /* STEP 1 */ -// const [count, setCount] = useState(0); - -// const increment = () => { -// /* STEP 4 */ -// setCount(count+1); -// }; -// const decrement = () => { -// /* STEP 5 */ -// setCount(count-1); -// }; -// const reset = () => { -// /* STEP 6 */ -// setCount(0); -// }; - -// const style = { -// fontSize: '1.5em', -// marginBottom: '0.3em', -// color: count % 2 === 0 ? 'royalblue' : 'crimson' /* STEP 2 */ -// }; - -// return ( -//
-//

Counter

-//
-// Number {count} is {count % 2 === 0 ? "even" : "odd"} {/* STEP 3 */} -//
-//
-// -// -// -//
-//
-// ); -// } \ No newline at end of file +} \ No newline at end of file diff --git a/src/components/Moods.js b/src/components/Moods.js index 87f21d651..eb11b6b84 100644 --- a/src/components/Moods.js +++ b/src/components/Moods.js @@ -37,6 +37,7 @@ const sadMood = 'Rather sad'; export default function Moods() { /* STEP 1 */ const [mood, setMood] = useState(initialMood); + const makeHappy = () => { /* STEP 4 */ setMood(happyMood); @@ -53,7 +54,7 @@ export default function Moods() { const style = { fontSize: '1.5em', marginBottom: '0.3em', - color: (mood === happyMood) ? 'royalblue' : 'crimson', /* STEP 2 */ + color: mood === happyMood ? 'royalblue' : 'crimson', /* STEP 2 */ }; return ( diff --git a/src/components/Programmers.js b/src/components/Programmers.js index 57075b917..c3c57fc2e 100644 --- a/src/components/Programmers.js +++ b/src/components/Programmers.js @@ -14,7 +14,7 @@ Find comments below to help you along. import React, {useState} from 'react'; // Use this variable ONLY to initialize a slice of state! -// There is something in the JSX right now breaking this rule...f +// There is something in the JSX right now breaking this rule... export const listOfAwesome = [ { id: '1', name: 'Ada Lovelace' }, { id: '2', name: 'Grace Hopper' }, @@ -36,12 +36,15 @@ export default function Programmers() { // It's going to utilize both slices of state to return the _name_ of the featured dev. // The beauty of closures is that we can "see" both slices of state from this region // of the program, without needing to inject the information through arguments. - for (let i = 0; i < programmers.length; i++) { - if (programmers[i].id === featured) { - return programmers[i].name; - } - } - return programmers.find(programmer => programmer.id === featured ? programmer.name : null); + + // for (let i = 0; i < programmers.length; i++) { + // if (programmers[i].id === featured) { + // return programmers[i].name; + // } + // } + + const programmerObject = programmers.find(programmer => programmer.id === featured); + return programmerObject.name; }; const style = { @@ -77,4 +80,4 @@ export default function Programmers() {
); -} +} \ No newline at end of file diff --git a/src/components/Spinner.js b/src/components/Spinner.js index 11dde5421..155826389 100644 --- a/src/components/Spinner.js +++ b/src/components/Spinner.js @@ -43,8 +43,8 @@ export default function Spinner() { /* STEP 1 */ const [spinnerOn, setSpinnerOn] = useState(true); const toggleSpinner = () => { - /* STEP 4 */ - setSpinnerOn(!spinnerOn); + /* STEP 4 */ + setSpinnerOn(!spinnerOn); }; return ( @@ -53,11 +53,73 @@ export default function Spinner() { { spinnerOn &&
--+--
/* STEP 2 */ } - {/* STEP 3: - Use a ternary expression inside the text of the button, to render "Hide" or "Show" depending on the value of 'spinnerOn'. */}
); -} +} + +/* +// SPINNER Instructions + +// Watch this short video: +// https://tk-assets.lambdaschool.com/38201164-4df9-4c89-923b-5325dc72124d_spinner.gif + +// How many slices of state do you think are necessary to act as "sources of truth" for all +// the things that change in this widget? Give it some thought before continuing reading! + +// Our first impulse might be to say 2 different states: +// - Whether the spinner is visible or not (perhaps this could be a boolean). +// - Whether the text of the button reads "Show Spinner" or "Hide Spinner". + +// But a single slice of state is all that's needed here: whether spinner is on or not. +// The text of the button can be derived from the value of that one slice of state. + +// STEP 0: +// Start by studying the component below, and importing the state hook. + +// STEP 1: +// Create a 'spinnerOn', 'setSpinnerOn' pair of variables using the state hook. +// The 'spinnerOn' slice should be initialized to true so the spinner is visible on page load. + +// STEP 2: +// This is called a logical expression. If the expressions on both sides of the '&&' are truthy, +// the one on the right becomes the value of the whole line. If an expression on either side of the '&&' +// is falsy, the one on the left becomes the value of the whole line. It's a neat little trick to render +// a React element (in this case the spinner) conditionally: only if the variable on the left is truthy. + +// Replace the hard-coded 'true' with the variable that keeps track of whether spinner is on or not. + +// STEP 3: +// Use a ternary expression inside the text of the button, to render "Hide" or "Show" depending on the value of 'spinnerOn'. + +// STEP 4: +// This click handler needs to toggle the spinner by setting "whether on" to be the opposite of what it currently is. +// Do you remember the operator we use to do "not"? +// */ + +// import React, {useState} from 'react'; /* STEP 0 */ + +// export default function Spinner() { +// /* STEP 1 */ +// const [spinnerOn, setSpinnerOn] = useState(true); +// const toggleSpinner = () => { +// /* STEP 4 */ +// setSpinnerOn(!spinnerOn); +// }; + +// return ( +//
+//

Spinner

+// { +// spinnerOn &&
--+--
/* STEP 2 */ +// } +// {/* STEP 3: +// Use a ternary expression inside the text of the button, to render "Hide" or "Show" depending on the value of 'spinnerOn'. */} +// +//
+// ); +// } diff --git a/src/components/Squares.js b/src/components/Squares.js index a4fc34481..b1ad11822 100644 --- a/src/components/Squares.js +++ b/src/components/Squares.js @@ -1,4 +1,3 @@ - /* SQUARES Instructions @@ -26,14 +25,17 @@ export default function Squares() { // of the currently active square. On page load there's no active square, // so the value of 'activeSquare' should be null. const [squares, setSquares] = useState(listOfSquareIds); - const [activeSquare, setActiveSquare] = useState(null); + const [activeSquare, setActiveSquare] = useState(null); const getClassName = id => { // This is NOT a click handler but a helper, used inside the JSX (see below). // It should return a string containing the class name of 'active', if the id passed // as the argument matches the active square in state, empty string otherwise. // Right-click and "inspect element" on the square to see its effect. - return id === activeSquare ? 'active' : ''; + + if (id === activeSquare) { + return 'active'; + } }; const markActive = id => { @@ -42,7 +44,7 @@ export default function Squares() { // (unless it already is, in which case we should reset // the currently active square id back to initial state). if (id === activeSquare) { - setActiveSquare(null) + setActiveSquare(null); } else { setActiveSquare(id); } @@ -70,3 +72,76 @@ export default function Squares() {
); } + + +// /* +// SQUARES Instructions + +// Watch this short video: +// https://tk-assets.lambdaschool.com/0aebd463-7c5e-4d0b-ad22-4da8f4b54e92_squares.gif + +// This component keeps track of a list of "square ids" on the one hand, +// and the currently active id on the other. That's two slices of state! +// One is used as the source of truth to render the squares, and the other +// so that the component knows which square is currently active. + +// Only one square (or none) can be active at any given point. + +// Find comments below to help you along. +// */ + +// import React, {useState} from 'react'; + +// // Use this variable ONLY to initialize a slice of state! +// const listOfSquareIds = ['sqA', 'sqB', 'sqC', 'sqD']; + +// export default function Squares() { +// // Use the state hook twice, as we need two slices of state: 'squares' and +// // 'activeSquare'. One holds the _array_ of square ids, and the other keeps track +// // of the currently active square. On page load there's no active square, +// // so the value of 'activeSquare' should be null. +// const [squares, setSquares] = useState(listOfSquareIds); +// const [activeSquare, setActiveSquare] = useState(null); + +// const getClassName = id => { +// // This is NOT a click handler but a helper, used inside the JSX (see below). +// // It should return a string containing the class name of 'active', if the id passed +// // as the argument matches the active square in state, empty string otherwise. +// // Right-click and "inspect element" on the square to see its effect. +// return id === activeSquare ? 'active' : ''; +// }; + +// const markActive = id => { +// // This is a helper used inside an _inlined_ click handler (see below). +// // Set the id argument to become the active id in state +// // (unless it already is, in which case we should reset +// // the currently active square id back to initial state). +// if (id === activeSquare) { +// setActiveSquare(null) +// } else { +// setActiveSquare(id); +// } +// }; + +// return ( +//
+//

Squares

+//
+// { +// // Nasty bug! We should map over a slice of state, instead of 'listOfSquareIds'. +// // We might say: "it works, though!" But if the list of squares is not state, +// // we could never add squares, change squares or remove squares in the future. Fix! +// squares.map(id => +//
markActive(id)} +// > +//
+// ) +// } +//
+//
+// ); +// }