Sorting Columns reactjs table - reactjs

Question

I'm trying to write a reactjs table for an assignment and am having trouble getting a sorting component working on the columns of my table. Most of this was duplicated from a previous post and I tried to integrate my data into the mold, but I am getting no results. Any idea why the code I have might not be working? Thanks!
class UserTable extends React.Component {
constructor(props){
super(props)
this.state = {
users: this.props.users,
sort: {
column: null,
direction: 'desc',
}
}
}
onSort = (column) => {
return e => {
const direction = this.state.sort.column ? (this.state.sort.direction === 'asc' ? 'desc' : 'asc') : 'desc'
const sortedUsers = this.state.users.sort((a, b) => {
if (column === 'name.first') {
const nameA = a.name.first.toUpperCase() // ignore upper and lowercase
const nameB = b.name.first.toUpperCase() // ignore upper and lowercase
if (nameA < nameB)
return -1
if (nameA > nameB)
return 1
else return 0
}
else {
return a.name.first - b.name.first
}
})
if (direction === 'desc') {
sortedUsers.reverse()
}
this.setState({
users: sortedUsers,
sort: {
column,
direction,
},
})
}
}
const setArrow = (column) => {
let className = 'sort-direction';
if (this.state.sort.column === column) {
className += this.state.sort.direction === 'asc' ? ' asc' : ' desc';
}
return className;
};
render() {
return (
<table>
<thead>
<tr>
<th onClick={this.onSort('name.first')}>
First Name
<span className={this.setArrow('name.first')}></span>
</th>
<th onClick={this.onSort('name.last')}>
Last Name
<span className={this.setArrow('name.last')}></span>
</th>
<th onClick={this.onSort('company')}>
Company
<span className={this.setArrow('company')}></span>
</th>
<th onClick={this.onSort('phone')}>
Phone
<span className={this.setArrow('phone')}></span>
</th>
<th onClick={this.onSort('email')}>
Email
<span className={this.setArrow('email')}></span>
</th>
<th onClick={this.onSort('birthdate')}>
Birthdate
<span className={this.setArrow('birthdate')}></span>
</th>
</tr>
</thead>
<tbody>
{this.state.users.map((user, index) => {
return (
<tr>
<td>{user.name.first}</td>
<td>{user.name.last}</td>
<td>{user.company}</td>
<td>{user.phone}</td>
<td>{user.email}</td>
<td>{user.birthdate}</td>
</tr>
);
})}
</tbody>
</table>
);
}
}
ReactDOM.render(<UserTable users={users} />, document.getElementById('container'));

Answer 1

You should return a function in onSort handler since event handlers take reference of a function but in your case they are getting undefined because you are invoking function and nothing returned.
So you code should looks like this:
onSort = column => {
return e => {
const direction = this.state.sort.column ? (this.state.sort.direction === 'asc' ? 'desc' : 'asc') : 'desc'
const sortedUsers = this.state.users.sort((a, b) => {
if (column === 'name.first') {
const nameA = a.name.first.toUpperCase() // ignore upper and lowercase
const nameB = b.name.first.toUpperCase() // ignore upper and lowercase
if (nameA < nameB)
return -1
if (nameA < nameB)
return 1
else return 0
}
else {
return a.name.first - b.name.first
}
})
if (direction === 'desc') {
sortedUsers.reverse()
}
this.setState({
users: sortedUsers,
sort: {
column,
direction,
},
})
}
}