-
Notifications
You must be signed in to change notification settings - Fork 0
/
Table.jsx
70 lines (69 loc) · 1.88 KB
/
Table.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
58
59
60
61
62
63
64
65
66
67
68
69
70
/**
* Stateful example
* Creating table and tbody elements, where we dynamically insert TableRow for every object from data array
*/
import React from 'react';
class Table extends React.Component {
constructor() {
super();
this.state = {
data: [
{
"id": 1,
"name": "Foo",
"age": "20"
},
{
"id": 2,
"name": "Bar",
"age": "30"
},
{
"id": 3,
"name": "Baz",
"age": "40"
}
]
}
}
render() {
return (
<div>
<Header />
<table>
<tbody>
{
/**
* We are using key = {i} inside map() function. This will help React to update
* only necessary elements instead of re-rendering entire list when something
* changes. It is a huge performance boost for large number of dynamic elements.
*/
}
{ this.state.data.map( (person, i) => <TableRow key = {i} data = {person} /> ) }
</tbody>
</table>
</div>
);
}
}
class Header extends React.Component {
render() {
return (
<div>
<h1>Header</h1>
</div>
);
}
}
class TableRow extends React.Component {
render() {
return (
<tr>
<td>{ this.props.data.id }</td>
<td>{ this.props.data.name }</td>
<td>{ this.props.data.age }</td>
</tr>
);
}
}
export default Table;