Skip to content

Commit 6074da6

Browse files
platform6platform6
committed
2 parents 04da10b + 389757e commit 6074da6

File tree

6 files changed

+169
-105
lines changed

6 files changed

+169
-105
lines changed

‎.all-contributorsrc‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -572,6 +572,17 @@
572572
"contributions": [
573573
"bug"
574574
]
575+
},
576+
{
577+
"login": "jgorfine-zendesk",
578+
"name": "Jen Gorfine",
579+
"avatar_url": "https://avatars.githubusercontent.com/u/93289772?v=4",
580+
"profile": "https://github.com/jgorfine-zendesk",
581+
"contributions": [
582+
"bug",
583+
"a11y",
584+
"code"
585+
]
575586
}
576587
],
577588
"skipCi": true,

‎README.md‎

Lines changed: 63 additions & 62 deletions
Large diffs are not rendered by default.

‎src/exercise/07.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ function App() {
2727
<button disabled={items.length >= allItems.length} onClick={addItem}>
2828
add item
2929
</button>
30-
<ul style={{listStyle: 'none', paddingLeft: 0}}>
30+
<ul>
3131
{items.map(item => (
3232
// 🐨 add a key prop to the <li> below. Set it to item.id
3333
<li>

‎src/final/07.extra-1.js‎

Lines changed: 72 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,14 @@ function FocusDemo() {
1212
{id: 'pear', value: '🍐 pear'},
1313
])
1414

15+
const [autoShuffle, setAutoShuffle] = React.useState(true)
16+
1517
React.useEffect(() => {
16-
const id = setInterval(() => setItems(shuffle), 1000)
17-
return () => clearInterval(id)
18-
}, [])
18+
if (autoShuffle) {
19+
const id = setInterval(() => setItems(shuffle), 1000)
20+
return () => clearInterval(id)
21+
}
22+
}, [autoShuffle])
1923

2024
function getChangeHandler(item) {
2125
return event => {
@@ -31,38 +35,73 @@ function FocusDemo() {
3135

3236
return (
3337
<div className="keys">
34-
<div>
35-
<h1>Without a key</h1>
36-
{items.map(item => (
37-
<input
38-
className={`${item.id}-input`}
39-
value={item.value}
40-
onChange={getChangeHandler(item)}
41-
/>
42-
))}
43-
</div>
44-
<div>
45-
<h1>With array index as key</h1>
46-
{items.map((item, index) => (
47-
<input
48-
className={`${item.id}-input`}
49-
key={index}
50-
value={item.value}
51-
onChange={getChangeHandler(item)}
52-
/>
53-
))}
54-
</div>
55-
<div>
56-
<h1>With a Proper Key</h1>
57-
{items.map(item => (
38+
<main>
39+
<div>
40+
<h1>Without a key</h1>
41+
<ul style={{display: 'flex', gap: '10px'}}>
42+
{items.map((item, index) => (
43+
<li>
44+
<label htmlFor={`no-key-${item.id}-input`}>
45+
No key #{index + 1}
46+
</label>
47+
<input
48+
id={`no-key-${item.id}-input`}
49+
className={`${item.id}-input`}
50+
value={item.value}
51+
onChange={getChangeHandler(item)}
52+
/>
53+
</li>
54+
))}
55+
</ul>
56+
</div>
57+
<div>
58+
<h1>With array index as key</h1>
59+
<ul style={{display: 'flex', gap: '10px'}}>
60+
{items.map((item, index) => (
61+
<li key={index}>
62+
<label htmlFor={`index-key-${item.id}-input`}>
63+
Index key #{index + 1}
64+
</label>
65+
<input
66+
id={`index-key-${item.id}-input`}
67+
className={`${item.id}-input`}
68+
value={item.value}
69+
onChange={getChangeHandler(item)}
70+
/>
71+
</li>
72+
))}
73+
</ul>
74+
</div>
75+
<div>
76+
<h1>With a proper key</h1>
77+
<ul style={{display: 'flex', gap: '10px'}}>
78+
{items.map((item, index) => (
79+
<li key={item.id}>
80+
<label htmlFor={`proper-key-${item.id}-input`}>
81+
Proper key #{index + 1}
82+
</label>
83+
<input
84+
id={`proper-key-${item.id}-input`}
85+
className={`${item.id}-input`}
86+
value={item.value}
87+
onChange={getChangeHandler(item)}
88+
/>
89+
</li>
90+
))}
91+
</ul>
92+
</div>
93+
</main>
94+
<aside style={{marginTop: '40px'}}>
95+
<div style={{alignItems: 'center', display: 'flex', gap: '8px'}}>
5896
<input
59-
className={`${item.id}-input`}
60-
key={item.id}
61-
value={item.value}
62-
onChange={getChangeHandler(item)}
97+
id="autoshuffle"
98+
type="checkbox"
99+
checked={autoShuffle}
100+
onChange={event => setAutoShuffle(event.target.checked)}
63101
/>
64-
))}
65-
</div>
102+
<label htmlFor="autoshuffle">Auto-shuffle inputs</label>
103+
</div>
104+
</aside>
66105
</div>
67106
)
68107
}

‎src/final/07.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ function App() {
2727
<button disabled={items.length >= allItems.length} onClick={addItem}>
2828
add item
2929
</button>
30-
<ul style={{listStyle: 'none', paddingLeft: 0}}>
30+
<ul>
3131
{items.map(item => (
3232
<li key={item.id}>
3333
<button onClick={() => removeItem(item)}>remove</button>{' '}

‎src/styles.css‎

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
1-
.keys input {
2-
margin-right: 10px;
3-
margin-left: 10px;
1+
.keys ul {
2+
list-style: none;
3+
padding-left: 0;
4+
}
5+
.keys li {
6+
margin-top: 10px;
7+
margin-bottom: 10px;
48
}
59
.keys input:focus {
610
outline: 6px solid #4bd2fb;
@@ -25,12 +29,13 @@
2529
.keys #pear-input {
2630
background-color: #bef171;
2731
}
28-
29-
.keys li {
30-
margin-top: 10px;
31-
margin-bottom: 10px;
32+
.keys #apple-input,
33+
.keys #orange-input,
34+
.keys #grape-input,
35+
.keys #pear-input {
36+
margin-right: 10px;
37+
margin-left: 10px;
3238
}
33-
3439
.keys [for='apple-input'],
3540
.keys [for='orange-input'],
3641
.keys [for='grape-input'],
@@ -39,3 +44,11 @@
3944
width: 100px;
4045
text-align: right;
4146
}
47+
.keys [for*='key'] {
48+
display: block;
49+
margin-bottom: 6px;
50+
}
51+
.keys input[type='checkbox'] {
52+
height: 16px;
53+
width: 16px;
54+
}

0 commit comments

Comments
 (0)