improve exercise

epicweb-dev · May 9, 2024 · d08a232 · d08a232
1 parent 90df070
commit d08a232
Show file tree

Hide file tree

Showing 11 changed files with 14 additions and 134 deletions.
diff --git a/exercises/01.use-reducer/01.problem.intro/index.tsx b/exercises/01.use-reducer/01.problem.intro/index.tsx
@@ -26,24 +26,12 @@ function Counter({ initialCount = 0, step = 1 }) {
 }
 
 function App() {
-	const [initialCount, setInitialCount] = useState(0)
 	const [step, setStep] = useState(1)
 
 	return (
 		<div className="app">
 			<h1>Counter:</h1>
 			<form>
-				<div>
-					<label htmlFor="initial-count-input">Initial Count</label>
-					<input
-						id="initial-count-input"
-						type="number"
-						value={initialCount}
-						// 🦉 notice when you change the initial count, it doesn't affect
-						// the counter because it's literally the "initial" count.
-						onChange={e => setInitialCount(Number(e.currentTarget.value))}
-					/>
-				</div>
 				<div>
 					<label htmlFor="step-input">Step</label>
 					<input
@@ -54,7 +42,7 @@ function App() {
 					/>
 				</div>
 			</form>
-			<Counter initialCount={initialCount} step={step} />
+			<Counter step={step} />
 		</div>
 	)
 }

diff --git a/exercises/01.use-reducer/01.solution.intro/index.tsx b/exercises/01.use-reducer/01.solution.intro/index.tsx
@@ -19,24 +19,12 @@ function Counter({ initialCount = 0, step = 1 }) {
 }
 
 function App() {
-	const [initialCount, setInitialCount] = useState(0)
 	const [step, setStep] = useState(1)
 
 	return (
 		<div className="app">
 			<h1>Counter:</h1>
 			<form>
-				<div>
-					<label htmlFor="initial-count-input">Initial Count</label>
-					<input
-						id="initial-count-input"
-						type="number"
-						value={initialCount}
-						// 🦉 notice when you change the initial count, it doesn't affect
-						// the counter because it's literally the "initial" count.
-						onChange={e => setInitialCount(Number(e.currentTarget.value))}
-					/>
-				</div>
 				<div>
 					<label htmlFor="step-input">Step</label>
 					<input
@@ -47,7 +35,7 @@ function App() {
 					/>
 				</div>
 			</form>
-			<Counter initialCount={initialCount} step={step} />
+			<Counter step={step} />
 		</div>
 	)
 }

diff --git a/exercises/01.use-reducer/02.problem.previous-state/index.tsx b/exercises/01.use-reducer/02.problem.previous-state/index.tsx
@@ -24,24 +24,12 @@ function Counter({ initialCount = 0, step = 1 }) {
 }
 
 function App() {
-	const [initialCount, setInitialCount] = useState(0)
 	const [step, setStep] = useState(1)
 
 	return (
 		<div className="app">
 			<h1>Counter:</h1>
 			<form>
-				<div>
-					<label htmlFor="initial-count-input">Initial Count</label>
-					<input
-						id="initial-count-input"
-						type="number"
-						value={initialCount}
-						// 🦉 notice when you change the initial count, it doesn't affect
-						// the counter because it's literally the "initial" count.
-						onChange={e => setInitialCount(Number(e.currentTarget.value))}
-					/>
-				</div>
 				<div>
 					<label htmlFor="step-input">Step</label>
 					<input
@@ -52,7 +40,7 @@ function App() {
 					/>
 				</div>
 			</form>
-			<Counter initialCount={initialCount} step={step} />
+			<Counter step={step} />
 		</div>
 	)
 }

diff --git a/exercises/01.use-reducer/02.solution.previous-state/index.tsx b/exercises/01.use-reducer/02.solution.previous-state/index.tsx
@@ -19,24 +19,12 @@ function Counter({ initialCount = 0, step = 1 }) {
 }
 
 function App() {
-	const [initialCount, setInitialCount] = useState(0)
 	const [step, setStep] = useState(1)
 
 	return (
 		<div className="app">
 			<h1>Counter:</h1>
 			<form>
-				<div>
-					<label htmlFor="initial-count-input">Initial Count</label>
-					<input
-						id="initial-count-input"
-						type="number"
-						value={initialCount}
-						// 🦉 notice when you change the initial count, it doesn't affect
-						// the counter because it's literally the "initial" count.
-						onChange={e => setInitialCount(Number(e.currentTarget.value))}
-					/>
-				</div>
 				<div>
 					<label htmlFor="step-input">Step</label>
 					<input
@@ -47,7 +35,7 @@ function App() {
 					/>
 				</div>
 			</form>
-			<Counter initialCount={initialCount} step={step} />
+			<Counter step={step} />
 		</div>
 	)
 }

diff --git a/exercises/01.use-reducer/03.problem.object/index.tsx b/exercises/01.use-reducer/03.problem.object/index.tsx
@@ -28,24 +28,12 @@ function Counter({ initialCount = 0, step = 1 }) {
 }
 
 function App() {
-	const [initialCount, setInitialCount] = useState(0)
 	const [step, setStep] = useState(1)
 
 	return (
 		<div className="app">
 			<h1>Counter:</h1>
 			<form>
-				<div>
-					<label htmlFor="initial-count-input">Initial Count</label>
-					<input
-						id="initial-count-input"
-						type="number"
-						value={initialCount}
-						// 🦉 notice when you change the initial count, it doesn't affect
-						// the counter because it's literally the "initial" count.
-						onChange={e => setInitialCount(Number(e.currentTarget.value))}
-					/>
-				</div>
 				<div>
 					<label htmlFor="step-input">Step</label>
 					<input
@@ -56,7 +44,7 @@ function App() {
 					/>
 				</div>
 			</form>
-			<Counter initialCount={initialCount} step={step} />
+			<Counter step={step} />
 		</div>
 	)
 }

diff --git a/exercises/01.use-reducer/03.solution.object/index.tsx b/exercises/01.use-reducer/03.solution.object/index.tsx
@@ -24,24 +24,12 @@ function Counter({ initialCount = 0, step = 1 }) {
 }
 
 function App() {
-	const [initialCount, setInitialCount] = useState(0)
 	const [step, setStep] = useState(1)
 
 	return (
 		<div className="app">
 			<h1>Counter:</h1>
 			<form>
-				<div>
-					<label htmlFor="initial-count-input">Initial Count</label>
-					<input
-						id="initial-count-input"
-						type="number"
-						value={initialCount}
-						// 🦉 notice when you change the initial count, it doesn't affect
-						// the counter because it's literally the "initial" count.
-						onChange={e => setInitialCount(Number(e.currentTarget.value))}
-					/>
-				</div>
 				<div>
 					<label htmlFor="step-input">Step</label>
 					<input
@@ -52,7 +40,7 @@ function App() {
 					/>
 				</div>
 			</form>
-			<Counter initialCount={initialCount} step={step} />
+			<Counter step={step} />
 		</div>
 	)
 }

diff --git a/exercises/01.use-reducer/04.problem.function/index.tsx b/exercises/01.use-reducer/04.problem.function/index.tsx
@@ -32,24 +32,12 @@ function Counter({ initialCount = 0, step = 1 }) {
 }
 
 function App() {
-	const [initialCount, setInitialCount] = useState(0)
 	const [step, setStep] = useState(1)
 
 	return (
 		<div className="app">
 			<h1>Counter:</h1>
 			<form>
-				<div>
-					<label htmlFor="initial-count-input">Initial Count</label>
-					<input
-						id="initial-count-input"
-						type="number"
-						value={initialCount}
-						// 🦉 notice when you change the initial count, it doesn't affect
-						// the counter because it's literally the "initial" count.
-						onChange={e => setInitialCount(Number(e.currentTarget.value))}
-					/>
-				</div>
 				<div>
 					<label htmlFor="step-input">Step</label>
 					<input
@@ -60,7 +48,7 @@ function App() {
 					/>
 				</div>
 			</form>
-			<Counter initialCount={initialCount} step={step} />
+			<Counter step={step} />
 		</div>
 	)
 }

diff --git a/exercises/01.use-reducer/04.solution.function/index.tsx b/exercises/01.use-reducer/04.solution.function/index.tsx
@@ -29,24 +29,12 @@ function Counter({ initialCount = 0, step = 1 }) {
 }
 
 function App() {
-	const [initialCount, setInitialCount] = useState(0)
 	const [step, setStep] = useState(1)
 
 	return (
 		<div className="app">
 			<h1>Counter:</h1>
 			<form>
-				<div>
-					<label htmlFor="initial-count-input">Initial Count</label>
-					<input
-						id="initial-count-input"
-						type="number"
-						value={initialCount}
-						// 🦉 notice when you change the initial count, it doesn't affect
-						// the counter because it's literally the "initial" count.
-						onChange={e => setInitialCount(Number(e.currentTarget.value))}
-					/>
-				</div>
 				<div>
 					<label htmlFor="step-input">Step</label>
 					<input
@@ -57,7 +45,7 @@ function App() {
 					/>
 				</div>
 			</form>
-			<Counter initialCount={initialCount} step={step} />
+			<Counter step={step} />
 		</div>
 	)
 }

diff --git a/exercises/01.use-reducer/05.problem.traditional/index.tsx b/exercises/01.use-reducer/05.problem.traditional/index.tsx
@@ -37,24 +37,12 @@ function Counter({ initialCount = 0, step = 1 }) {
 }
 
 function App() {
-	const [initialCount, setInitialCount] = useState(0)
 	const [step, setStep] = useState(1)
 
 	return (
 		<div className="app">
 			<h1>Counter:</h1>
 			<form>
-				<div>
-					<label htmlFor="initial-count-input">Initial Count</label>
-					<input
-						id="initial-count-input"
-						type="number"
-						value={initialCount}
-						// 🦉 notice when you change the initial count, it doesn't affect
-						// the counter because it's literally the "initial" count.
-						onChange={e => setInitialCount(Number(e.currentTarget.value))}
-					/>
-				</div>
 				<div>
 					<label htmlFor="step-input">Step</label>
 					<input
@@ -65,7 +53,7 @@ function App() {
 					/>
 				</div>
 			</form>
-			<Counter initialCount={initialCount} step={step} />
+			<Counter step={step} />
 		</div>
 	)
 }

diff --git a/exercises/01.use-reducer/05.solution.traditional/index.tsx b/exercises/01.use-reducer/05.solution.traditional/index.tsx
@@ -42,24 +42,12 @@ function Counter({ initialCount = 0, step = 1 }) {
 }
 
 function App() {
-	const [initialCount, setInitialCount] = useState(0)
 	const [step, setStep] = useState(1)
 
 	return (
 		<div className="app">
 			<h1>Counter:</h1>
 			<form>
-				<div>
-					<label htmlFor="initial-count-input">Initial Count</label>
-					<input
-						id="initial-count-input"
-						type="number"
-						value={initialCount}
-						// 🦉 notice when you change the initial count, it doesn't affect
-						// the counter because it's literally the "initial" count.
-						onChange={e => setInitialCount(Number(e.currentTarget.value))}
-					/>
-				</div>
 				<div>
 					<label htmlFor="step-input">Step</label>
 					<input
@@ -70,7 +58,7 @@ function App() {
 					/>
 				</div>
 			</form>
-			<Counter initialCount={initialCount} step={step} />
+			<Counter step={step} />
 		</div>
 	)
 }

diff --git a/exercises/01.use-reducer/README.mdx b/exercises/01.use-reducer/README.mdx
@@ -17,22 +17,22 @@ Here's an example of using `useReducer` to manage the value of a name in an
 input.
 
 ```tsx
-function nameReducer(previousName, newName) {
+function nameReducer(previousName: string, newName: string) {
 	return newName
 }
 
 const initialNameValue = 'Joe'
 
 function NameInput() {
 	const [name, setName] = useReducer(nameReducer, initialNameValue)
-	const handleChange = event => setName(event.target.value)
+	const handleChange = event => setName(event.currentTarget.value)
 	return (
-		<>
+		<div>
 			<label>
 				Name: <input defaultValue={name} onChange={handleChange} />
 			</label>
 			<div>You typed: {name}</div>
-		</>
+		</div>
 	)
 }
 ```