-
Notifications
You must be signed in to change notification settings - Fork 0
/
Counters.jsx
57 lines (50 loc) · 1.39 KB
/
Counters.jsx
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
import React, { Component } from "react";
import Counter from "./counter";
class Counters extends Component {
state = {
counters: [
{ id: 1, value: 4 },
{ id: 2, value: 0 },
{ id: 3, value: 0 },
{ id: 4, value: 0 }
]
};
handleIncrement = (counter) => {
const counters = [...this.state.counters];
const index = counters.indexOf(counter);
counters[index] = { ...counter };
counters[index].value++;
this.setState({ counters });
}
handleDelete = (counterId) => {
console.log('event handler called', counterId)
const counters = this.state.counters.filter(c => c.id !== counterId)
this.setState({ counters }) // code was simplified form this.setState({ counters : counters}) because key : value are the same!
}
handleReset = () => {
const counters = this.state.counters.map(c => {
c.value = 0;
return c;
})
this.setState({ counters });
}
render() {
return (
<div>
<button
onClick={this.handleReset}
className="btn btn-primary btn-sm m-2">Reset
</button>
{this.state.counters.map(counter => (
< Counter
key={counter.id} // used internally by React
onDelete={this.handleDelete}
onIncrement={this.handleIncrement}
counter={counter}
/>
))}
</div>
);
}
}
export default Counters;