-
Notifications
You must be signed in to change notification settings - Fork 0
/
23-rendering-lists.html
106 lines (97 loc) · 3.12 KB
/
23-rendering-lists.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@16.12.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.12.0/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.8.3/babel.js"></script>
<script type="text/babel">
const allItems = [
{ id: "a", value: "apple" },
{ id: "o", value: "orange" },
{ id: "g", value: "grape" },
{ id: "p", value: "pear" },
];
function App() {
const [items, setItems] = React.useState(allItems);
function addItem() {
setItems([...items, allItems.find((i) => !items.includes(i))]);
}
function removeItem(item) {
setItems(items.filter((i) => i !== item));
}
return (
<div>
<button disabled={items.length >= allItems.length} onClick={addItem}>
add item
</button>
<ul style={{ listStyle: "none", paddingLeft: 0 }}>
{items.map((item) => (
<li>
<button onClick={() => removeItem(item)}>remove</button>{" "}
<label htmlFor={`${item.value}-input`}>{item.value}</label>{" "}
<input id={`${item.value}-input`} defaultValue={item.value} />
</li>
))}
</ul>
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
</script>
<script type="text/babel">
function FocusDemo() {
const [items, setItems] = React.useState([
{ id: "a", value: "apple" },
{ id: "o", value: "orange" },
{ id: "g", value: "grape" },
{ id: "p", value: "pear" },
]);
React.useEffect(() => {
const interval = setInterval(() => {
setItems(shuffle(items));
}, 1000);
return () => clearInterval(interval);
}, []);
return (
<div>
<div>
<h1>Without Key</h1>
{items.map((item) => (
<input value={item.value} />
))}
</div>
<div>
<h1>With Key as Index</h1>
{items.map((item, index) => (
<input key={index} value={item.value} />
))}
</div>
<div>
<h1>With Key</h1>
{items.map((item) => (
<input key={item.id} value={item.value} />
))}
</div>
</div>
);
}
function shuffle(originalArray) {
const array = [...originalArray];
let currentIndex = array.length;
let temporaryValue;
let randomIndex;
// While there remain elements to shuffle...
while (0 !== currentIndex) {
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
// And swap it with the current element.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
// uncomment this line to demo:
// ReactDOM.render(<FocusDemo />, document.getElementById("root"));
</script>
</body>