a small incremental UI library for the web
javascript
web
ui
Move state up to list
+43
-11
+43
-11
demos/todo/todo.tsx
+43
-11
demos/todo/todo.tsx
···
18
18
);
19
19
}
20
20
21
+
function nextId() {
22
+
if (!this.nextId) this.nextId = 0;
23
+
const id = this.nextId;
24
+
this.nextId += 1;
25
+
return id;
26
+
}
27
+
28
+
function makeItem(name) {
29
+
return {
30
+
id: nextId(),
31
+
name: name,
32
+
complete: false,
33
+
};
34
+
}
35
+
21
36
function List(props) {
22
-
const [items, setItems] = useState(['item 1', 'item 2', 'item 3']);
37
+
const [items, setItems] = useState([
38
+
makeItem('item 1'),
39
+
makeItem('item 2'),
40
+
makeItem('item 3'),
41
+
]);
23
42
const [newItemText, setNewItemText] = useState('');
24
43
44
+
function toggleComplete(id) {
45
+
setItems(items => {
46
+
return items.map(item => {
47
+
if (item.id == id) {
48
+
item = structuredClone(item);
49
+
item.complete = !item.complete;
50
+
return item;
51
+
}
52
+
else {
53
+
return item;
54
+
}
55
+
});
56
+
});
57
+
}
58
+
25
59
useStyle(`
26
60
.container {
27
61
display: flex;
···
39
73
40
74
return (
41
75
<div class="container">
42
-
<ItemInput addItem={text => setItems(items => [...items, text])} />
43
-
<div class="items">{items.map(text => <Item text={text} />)}</div>
76
+
<ItemInput addItem={name => setItems(items => [...items, makeItem(name)])} />
77
+
<div class="items">{items.map(item => <Item item={item} toggleComplete={toggleComplete} />)}</div>
44
78
</div>
45
79
);
46
80
}
···
95
129
);
96
130
}
97
131
98
-
function Item(props) {
99
-
const [checked, setChecked] = useState(false);
100
-
132
+
function Item({item, toggleComplete}) {
101
133
useStyle(`
102
134
label {
103
135
padding: 8px;
···
114
146
<label>
115
147
<input
116
148
type="checkbox"
117
-
checked={checked}
149
+
checked={item.complete}
118
150
onInput={ev => {
119
-
setChecked(c => !c);
151
+
toggleComplete(item.id);
120
152
}}
121
153
/>
122
154
{
123
-
checked
124
-
? <s>{props.text}</s>
125
-
: <span>{props.text}</span>
155
+
item.complete
156
+
? <s>{item.name}</s>
157
+
: <span>{item.name}</span>
126
158
}
127
159
</label>
128
160
);