View difference between Paste ID: Scpk6fRN and Q80Yum5i
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
);