improve instructions

epicweb-dev · May 17, 2024 · 003ee08 · 003ee08
1 parent d788a9f
commit 003ee08
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 10 deletions.
diff --git a/examples/unnecessary-rerenders/index.tsx b/examples/unnecessary-rerenders/index.tsx
@@ -20,7 +20,8 @@ function NameInput({
 }) {
 	return (
 		<label>
-			Name: <input value={name} onChange={e => onNameChange(e.target.value)} />
+			Name:{' '}
+			<input value={name} onChange={e => onNameChange(e.currentTarget.value)} />
 		</label>
 	)
 }

diff --git a/exercises/03.concurrent-rendering/README.mdx b/exercises/03.concurrent-rendering/README.mdx
@@ -51,7 +51,7 @@ function App() {
 	const deferredText = useDeferredValue(text)
 	return (
 		<>
-			<input value={text} onChange={e => setText(e.target.value)} />
+			<input value={text} onChange={e => setText(e.currentTarget.value)} />
 			<SlowList text={deferredText} />
 		</>
 	)

diff --git a/exercises/06.rerenders/README.mdx b/exercises/06.rerenders/README.mdx
@@ -59,7 +59,8 @@ function NameInput({
 }) {
 	return (
 		<label>
-			Name: <input value={name} onChange={e => onNameChange(e.target.value)} />
+			Name:{' '}
+			<input value={name} onChange={e => onNameChange(e.currentTarget.value)} />
 		</label>
 	)
 }
@@ -125,7 +126,8 @@ const NameInput = memo(function NameInput({
 }) {
 	return (
 		<label>
-			Name: <input value={name} onChange={e => onNameChange(e.target.value)} />
+			Name:{' '}
+			<input value={name} onChange={e => onNameChange(e.currentTarget.value)} />
 		</label>
 	)
 })

diff --git a/exercises/07.windowing/01.problem.virtualizer/src/app.tsx b/exercises/07.windowing/01.problem.virtualizer/src/app.tsx
@@ -24,7 +24,7 @@ function CityChooser() {
 
 	const isPending = useSpinDelay(isTransitionPending)
 
-	// 🐨 create a ref here for HTMLDivElement
+	// 🐨 create a ref here for HTMLUListElement
 
 	// 🐨 create a rowVirtualizer with useVirtualizer from "@tanstack/react-virtual"
 	// - the count should be the length of the items

diff --git a/exercises/07.windowing/README.mdx b/exercises/07.windowing/README.mdx
@@ -63,19 +63,21 @@ function MyListOfData({ items }) {
 ```tsx
 // after
 function MyListOfData({ items }) {
-	const listRef = useRef()
+	const parentRef = useRef<HTMLUListElement>(null)
+
 	const rowVirtualizer = useVirtualizer({
-		size: items.length,
-		getScrollElement: () => listRef.current,
+		count: cities.length,
+		getScrollElement: () => parentRef.current,
 		estimateSize: () => 20,
 	})
 
 	return (
-		<ul ref={listRef} style={{ position: 'relative', height: 300 }}>
+		<ul ref={parentRef} style={{ position: 'relative', height: 300 }}>
 			<li style={{ height: `${rowVirtualizer.getTotalSize()}px` }} />
 			{rowVirtualizer.getVirtualItems().map(virtualItem => {
-				const { index, key, size, start } = virtualItem
 				const item = items[index]
+				if (!item) return null
+				const { index, key, size, start } = virtualItem
 				return (
 					<li
 						key={key}