SHOW:
|
|
- or go back to the newest paste.
1 | var ListItem = React.createClass({ | |
2 | - | getInitialState : function() { |
2 | + | onSelect : function() { |
3 | - | return { selected : false } |
3 | + | this.props.onSelect(this.props.user); |
4 | }, | |
5 | - | onSelect : function(e) { |
5 | + | |
6 | - | this.setState({ selected : !this.state.selected }); |
6 | + | |
7 | <li onClick={this.onSelect} className={this.props.selected ? "selected" : ""}> | |
8 | {this.props.user.firstname} {this.props.user.lastname} | |
9 | - | console.log(this.state.selected); |
9 | + | |
10 | ) | |
11 | - | <li onClick={this.onSelect} className={(this.state.selected) ? "selected" : ""}> |
11 | + | |
12 | }); | |
13 | ||
14 | var List = React.createClass({ | |
15 | getInitialState : function() { | |
16 | return { selected : null } | |
17 | }, | |
18 | ||
19 | onSelect: function(user) { | |
20 | this.setState({selected: user === this.state.selected ? null : user}); | |
21 | } | |
22 | - | return <ListItem user={user} /> |
22 | + | |
23 | render : function() { | |
24 | ||
25 | var users = this.props.users.map(function(user) { | |
26 | return <ListItem | |
27 | user={user} | |
28 | selected={this.state.selected === user} | |
29 | onSelect={this.onSelect} /> | |
30 | }); | |
31 | ||
32 | return ( | |
33 | <ul className="list">{users}</ul> | |
34 | ); | |
35 | } | |
36 | }); | |
37 | ||
38 | ||
39 | var users = []; | |
40 | for(var i = 0; i < 40; i += 1) { | |
41 | users.push({ | |
42 | firstname : faker.name.firstName(), | |
43 | lastname : faker.name.lastName(), | |
44 | email : faker.internet.email() | |
45 | }); | |
46 | } | |
47 | ||
48 | React.render( | |
49 | <List users={users} />, | |
50 | document.body | |
51 | ); |