-
Notifications
You must be signed in to change notification settings - Fork 700
/
23-rendering-lists.html
106 lines (97 loc) · 3.07 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/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/[email protected]/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>