Skip to content

Commit d940374

Browse files
daniel-norrisdaniel-norris
committed
Fixed broken placeholder links on manipulating dom with refs page
1 parent 50d6991 commit d940374

File tree

1 file changed

+63
-63
lines changed

1 file changed

+63
-63
lines changed

‎src/content/learn/manipulating-the-dom-with-refs.md‎

Lines changed: 63 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -92,28 +92,28 @@ You can have more than a single ref in a component. In this example, there is a
9292
import { useRef } from 'react';
9393

9494
export default function CatFriends() {
95-
const firstCatRef = useRef(null);
96-
const secondCatRef = useRef(null);
97-
const thirdCatRef = useRef(null);
95+
const firstDogRef = useRef(null);
96+
const secondDogRef = useRef(null);
97+
const thirdDogRef = useRef(null);
9898

99-
function handleScrollToFirstCat() {
100-
firstCatRef.current.scrollIntoView({
99+
function handleScrollToFirstDog() {
100+
firstDogRef.current.scrollIntoView({
101101
behavior: 'smooth',
102102
block: 'nearest',
103103
inline: 'center'
104104
});
105105
}
106106

107-
function handleScrollToSecondCat() {
108-
secondCatRef.current.scrollIntoView({
107+
function handleScrollToSecondDog() {
108+
secondDogRef.current.scrollIntoView({
109109
behavior: 'smooth',
110110
block: 'nearest',
111111
inline: 'center'
112112
});
113113
}
114114

115-
function handleScrollToThirdCat() {
116-
thirdCatRef.current.scrollIntoView({
115+
function handleScrollToThirdDog() {
116+
thirdDogRef.current.scrollIntoView({
117117
behavior: 'smooth',
118118
block: 'nearest',
119119
inline: 'center'
@@ -123,37 +123,37 @@ export default function CatFriends() {
123123
return (
124124
<>
125125
<nav>
126-
<button onClick={handleScrollToFirstCat}>
127-
Neo
126+
<button onClick={handleScrollToFirstDog}>
127+
Puppies
128128
</button>
129-
<button onClick={handleScrollToSecondCat}>
130-
Millie
129+
<button onClick={handleScrollToSecondDog}>
130+
Leo
131131
</button>
132-
<button onClick={handleScrollToThirdCat}>
132+
<button onClick={handleScrollToThirdDog}>
133133
Bella
134134
</button>
135135
</nav>
136136
<div>
137137
<ul>
138138
<li>
139139
<img
140-
src="https://placecats.com/neo/300/200"
141-
alt="Neo"
142-
ref={firstCatRef}
140+
src="https://placedog.net/300/300?id=2"
141+
alt="Image of two Golden Retriever puppies"
142+
ref={firstDogRef}
143143
/>
144144
</li>
145145
<li>
146146
<img
147-
src="https://placecats.com/millie/200/200"
148-
alt="Millie"
149-
ref={secondCatRef}
147+
src="https://placedog.net/300/300?id=3"
148+
alt="Image of a brown Golden Retriever"
149+
ref={secondDogRef}
150150
/>
151151
</li>
152152
<li>
153153
<img
154-
src="https://placecats.com/bella/199/200"
155-
alt="Bella"
156-
ref={thirdCatRef}
154+
src="https://placedog.net/300/300?id=8"
155+
alt="Image of a Border Collie chasing a tennis ball"
156+
ref={thirdDogRef}
157157
/>
158158
</li>
159159
</ul>
@@ -220,13 +220,13 @@ This example shows how you can use this approach to scroll to an arbitrary node
220220
```js
221221
import { useRef, useState } from "react";
222222

223-
export default function CatFriends() {
223+
export default function DogFriends() {
224224
const itemsRef = useRef(null);
225-
const [catList, setCatList] = useState(setupCatList);
225+
const [dogList, setDogList] = useState(setupDogList);
226226

227-
function scrollToCat(cat) {
227+
function scrollToDog(dog) {
228228
const map = getMap();
229-
const node = map.get(cat);
229+
const node = map.get(dog);
230230
node.scrollIntoView({
231231
behavior: "smooth",
232232
block: "nearest",
@@ -245,25 +245,25 @@ export default function CatFriends() {
245245
return (
246246
<>
247247
<nav>
248-
<button onClick={() => scrollToCat(catList[0])}>Neo</button>
249-
<button onClick={() => scrollToCat(catList[5])}>Millie</button>
250-
<button onClick={() => scrollToCat(catList[9])}>Bella</button>
248+
<button onClick={() => scrollToDog(dogList[1])}>Puppies</button>
249+
<button onClick={() => scrollToDog(dogList[2])}>Leo</button>
250+
<button onClick={() => scrollToDog(dogList[7])}>Bella</button>
251251
</nav>
252252
<div>
253253
<ul>
254-
{catList.map((cat) => (
254+
{dogList.map((dog) => (
255255
<li
256-
key={cat}
256+
key={dog}
257257
ref={(node) => {
258258
const map = getMap();
259-
map.set(cat, node);
259+
map.set(dog, node);
260260

261261
return () => {
262-
map.delete(cat);
262+
map.delete(dog);
263263
};
264264
}}
265265
>
266-
<img src={cat} />
266+
<img src={dog} />
267267
</li>
268268
))}
269269
</ul>
@@ -272,13 +272,13 @@ export default function CatFriends() {
272272
);
273273
}
274274

275-
function setupCatList() {
276-
const catList = [];
277-
for (let i = 0; i < 10; i++) {
278-
catList.push("https://loremflickr.com/320/240/cat?lock=" + i);
275+
function setupDogList() {
276+
const dogList = [];
277+
for (let i = 1; i < 10; i++) {
278+
dogList.push("https://placedog.net/300/300?id=" + i);
279279
}
280280

281-
return catList;
281+
return dogList;
282282
}
283283

284284
```
@@ -315,15 +315,15 @@ In this example, `itemsRef` doesn't hold a single DOM node. Instead, it holds a
315315

316316
```js
317317
<li
318-
key={cat.id}
318+
key={dog.id}
319319
ref={node => {
320320
const map = getMap();
321321
// Add to the Map
322-
map.set(cat, node);
322+
map.set(dog, node);
323323

324324
return () => {
325325
// Remove from the Map
326-
map.delete(cat);
326+
map.delete(dog);
327327
};
328328
}}
329329
>
@@ -840,13 +840,13 @@ You don't need to have a ref to every image for this exercise. It should be enou
840840
```js
841841
import { useState } from 'react';
842842

843-
export default function CatFriends() {
843+
export default function DogFriends() {
844844
const [index, setIndex] = useState(0);
845845
return (
846846
<>
847847
<nav>
848848
<button onClick={() => {
849-
if (index < catList.length - 1) {
849+
if (index < dogList.length - 1) {
850850
setIndex(index + 1);
851851
} else {
852852
setIndex(0);
@@ -857,16 +857,16 @@ export default function CatFriends() {
857857
</nav>
858858
<div>
859859
<ul>
860-
{catList.map((cat, i) => (
861-
<li key={cat.id}>
860+
{dogList.map((dog, i) => (
861+
<li key={dog.id}>
862862
<img
863863
className={
864864
index === i ?
865865
'active' :
866866
''
867867
}
868-
src={cat.imageUrl}
869-
alt={'Cat #' + cat.id}
868+
src={dog.imageUrl}
869+
alt={'Dog #' + dog.id}
870870
/>
871871
</li>
872872
))}
@@ -876,11 +876,11 @@ export default function CatFriends() {
876876
);
877877
}
878878

879-
const catList = [];
880-
for (let i = 0; i < 10; i++) {
881-
catList.push({
879+
const dogList = [];
880+
for (let i = 1; i < 10; i++) {
881+
dogList.push({
882882
id: i,
883-
imageUrl: 'https://loremflickr.com/250/200/cat?lock=' + i
883+
imageUrl: 'https://placedog.net/300/300?id=' + i
884884
});
885885
}
886886

@@ -942,7 +942,7 @@ Note that the `flushSync` call is necessary to force React to update the DOM bef
942942
import { useRef, useState } from 'react';
943943
import { flushSync } from 'react-dom';
944944

945-
export default function CatFriends() {
945+
export default function DogFriends() {
946946
const selectedRef = useRef(null);
947947
const [index, setIndex] = useState(0);
948948

@@ -951,7 +951,7 @@ export default function CatFriends() {
951951
<nav>
952952
<button onClick={() => {
953953
flushSync(() => {
954-
if (index < catList.length - 1) {
954+
if (index < dogList.length - 1) {
955955
setIndex(index + 1);
956956
} else {
957957
setIndex(0);
@@ -968,9 +968,9 @@ export default function CatFriends() {
968968
</nav>
969969
<div>
970970
<ul>
971-
{catList.map((cat, i) => (
971+
{dogList.map((dog, i) => (
972972
<li
973-
key={cat.id}
973+
key={dog.id}
974974
ref={index === i ?
975975
selectedRef :
976976
null
@@ -982,8 +982,8 @@ export default function CatFriends() {
982982
'active'
983983
: ''
984984
}
985-
src={cat.imageUrl}
986-
alt={'Cat #' + cat.id}
985+
src={dog.imageUrl}
986+
alt={'Dog #' + dog.id}
987987
/>
988988
</li>
989989
))}
@@ -993,11 +993,11 @@ export default function CatFriends() {
993993
);
994994
}
995995

996-
const catList = [];
997-
for (let i = 0; i < 10; i++) {
998-
catList.push({
996+
const dogList = [];
997+
for (let i = 1; i < 10; i++) {
998+
dogList.push({
999999
id: i,
1000-
imageUrl: 'https://loremflickr.com/250/200/cat?lock=' + i
1000+
imageUrl: 'https://placedog.net/300/300?id=' + i
10011001
});
10021002
}
10031003

0 commit comments

Comments
 (0)