From dc7ff56ae84cd5758c3550d9d3592ab18a33a4b7 Mon Sep 17 00:00:00 2001 From: Ryan Berry Date: Mon, 21 Mar 2022 14:52:09 -0700 Subject: [PATCH 1/6] counter.js working --- src/components/Counter.js | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/components/Counter.js b/src/components/Counter.js index 447a5e849..0d3d2043c 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 */ +// import { useState } from 'react/cjs/react.production.min'; -export default function Counter() { +export default function Counter(props) { /* 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(count - count) }; 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 */}
From 146a34214daad2ab85d04418be06c5b8cf4c9735 Mon Sep 17 00:00:00 2001 From: Ryan Berry Date: Mon, 21 Mar 2022 14:58:02 -0700 Subject: [PATCH 2/6] moods.js working --- src/components/Moods.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/Moods.js b/src/components/Moods.js index 98b49467f..1d690c375 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,31 @@ 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 === 'Quite happy!' ? 'royalblue' : 'crimson', /* STEP 2 */ }; return (

Moods

-
Not sure how I feel
{/* STEP 3 */} +
{mood}
{/* STEP 3 */}
From cd748a62149e62e597ad23167d3b2a5d22cbe786 Mon Sep 17 00:00:00 2001 From: Ryan Berry Date: Mon, 21 Mar 2022 15:04:55 -0700 Subject: [PATCH 3/6] spinner.js working --- src/components/Spinner.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/Spinner.js b/src/components/Spinner.js index d0326fd34..e7a263bc7 100644 --- a/src/components/Spinner.js +++ b/src/components/Spinner.js @@ -37,23 +37,25 @@ 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 */ +const [spinnerOn, setSpinnerOn] = useState(true); const toggleSpinner = () => { /* STEP 4 */ + setSpinnerOn(!spinnerOn) }; return (

Spinner

{ - true &&
--+--
/* STEP 2 */ + spinnerOn &&
--+--
/* STEP 2 */ }
); From 9b7145c3cd3a8e2f4fe1a4cb7d5d0f9f501f3c1f Mon Sep 17 00:00:00 2001 From: Ryan Berry Date: Mon, 21 Mar 2022 15:29:31 -0700 Subject: [PATCH 4/6] input.js working --- src/components/Input.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/Input.js b/src/components/Input.js index 36bf8fe03..cbb2e3300 100644 --- a/src/components/Input.js +++ b/src/components/Input.js @@ -34,34 +34,38 @@ 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; + console.log(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.length > 10 ? 'crimson' : 'royalblue', /* STEP 2 */ }; return (

Input

-
{/* STEP 3 */} +
{inputValue.toUpperCase()}
{/* STEP 3 */}
- {/* STEP 6 */} + {/* STEP 6 */}
From 0d0ed9e7cfd76ae5877e4655fb75fde67f8ebeb2 Mon Sep 17 00:00:00 2001 From: Ryan Berry Date: Mon, 21 Mar 2022 15:54:40 -0700 Subject: [PATCH 5/6] squares.js working --- src/components/Squares.js | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/components/Squares.js b/src/components/Squares.js index 25ab72546..67a3fc24c 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: Mon, 21 Mar 2022 16:17:32 -0700 Subject: [PATCH 6/6] programmers.js working --- src/components/Programmers.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/components/Programmers.js b/src/components/Programmers.js index e34c4f392..2c99321cc 100644 --- a/src/components/Programmers.js +++ b/src/components/Programmers.js @@ -11,11 +11,11 @@ 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... -export const listOfAwesome = [ + export const listOfAwesome = [ { id: '1', name: 'Ada Lovelace' }, { id: '2', name: 'Grace Hopper' }, { id: '3', name: 'Evelyn Boyd Granville' }, @@ -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,14 @@ 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. + const featuredDev = programmers.find(dev => dev.id === featured); + return featuredDev.name; }; 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 +54,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 +66,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' }