Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
User List Non HoC
var UserList = React.createClass({
getInitialState() {
return {
users: [],
selection: new Set(),
};
},
fetchUsers() {
// Hit API, get users, and set to users on state.
// Assume unsharable for... reasons.
},
onSelect(user) {
if(this.state.selection.has(user)) {
this.state.selection.delete(user);
} else {
this.state.selection.add(user);
}
},
renderUsers() {
return users.map(function(user) {
return(
<tr>
<td>
<input type="checkbox" onClick={this.onSelect(user)} checked={this.state.selection.has(user)} />
</td>
<td>user.name</td>
<td>user.id</td>
<td>user.numberOfBadges</td>
</tr>
);
});
},
render() {
return (
<table>
<thead>
<tr>
<th></th>
<th>"Name"</th>
<th>"ID"</th>
<th>"# of Badges"</th>
</tr>
</thead>
<tbody>
this.renderUsers();
</tbody>
</table>
);
},
});
export default UserList;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment