Wierd Class Property behaviour in ES6 React. props wont update

Im having a wierd behaviour regarding class properties and what seems to be the this binding. it seems that after the second render this.props wont update for class properties. so onNextPage={this.myHandler} will have the props that were available on the first render this is my current class

class UserTable extends Component { componentDidMount() { this.props.onLoad(); } handleNextPage = () => { const { currentPage, totalPages, onPageChange } = this.props; console.log('This props', this.props); const nextPage = currentPage + 1; ((nextPage <= totalPages) ? onPageChange : always(undefined))(nextPage); } /** * Will handle sorting * @param {*String} column column to sort */ handleOnSort = (column) => { const { sort, onSort } = this.props; onSort(column !== sort || startsWithMinus(sort) ? column : `-${column}`); } /** * Will call next page if next page is available */ /** * will call previous page if page is available */ handlePreviousPage = () => { const { currentPage, onPageChange } = this.props; const previousPage = currentPage - 1; ((previousPage >= 1) ? onPageChange : always(undefined))(previousPage); } /** * Will render UserTable */ render() { const { users, currentPage, totalPages, working, sort } = this.props; console.log('props are ', this.props); const isSortingByKey = curry(soringType)(sort); return ( <Flex column> <Table currentPage={currentPage} amountOfPages={totalPages} onNextPage={this.handleNextPage} onPreviousPage={this.handlePreviousPage} columns={[ { caption: 'Last Name', handler: () => this.handleOnSort('last_name'), sort: isSortingByKey('last_name') }, { caption: 'First Name', handler: () => this.handleOnSort('first_name'), sort: isSortingByKey('first_name') }, { caption: 'Email', handler: () => this.handleOnSort(User.EMAIL), sort: isSortingByKey(User.EMAIL) }, { caption: 'Phone', handler: () => this.handleOnSort('phone_number'), sort: isSortingByKey('phone_number') }, { caption: 'Role', handler: () => this.handleOnSort(User.ROLE), sort: isSortingByKey(User.ROLE) }, { caption: 'Competition', handler: () => this.handleOnSort(User.COMPETITION), sort: isSortingByKey(User.COMPETITION) }, { caption: 'Last Login', handler: () => this.handleOnSort('last_login'), sort: isSortingByKey('last_login') }, { caption: 'Status', handler: () => this.handleOnSort(User.STATUS), sort: isSortingByKey(User.STATUS) } ]} > {users.map(user => ( <TableRow key={user.get(User.ID)}> <Link className={styles['link-to-profile']} to={`/view-user/${user.get(User.ID)}`}>{user.get(User.LAST_NAME)}</Link> {user.get(User.FIRST_NAME)} {user.get(User.EMAIL)} {user.get(User.PHONE_NUMBER)} {user.get(User.ROLE)} {user.get(User.COMPETITION)} {user.get(User.LAST_LOGIN)} {user.get(User.STATUS)} </TableRow> ))} </Table> <Loading block={working} /> </Flex> ); } } 

So say change the handler to be a class method meaning

handleNextPage(){ console.log('are this my props',this.props); } 

and on the onClick={()=>this.handleNextPage()} that will work, but using Class properties seems to get an outdated props.

Any ideas?