Why am I getting undefined is not a function, ReactJs

I am trying to create a mixin that helps to break up some of the code for a pagination component I am building. The code its self can be run at this jsfiddle. You will have to inspect the page to see the error when you run it, but essentially: this.setPrevious(), this.setNext() and this.createPageBlocks() are considered "undefined". Which I do not believe to be correct at all, how ever I am probably doing something wrong?

the full code can be seen below. When I do a console.log(PaginationMixin); in the render() of Pagination the class (object) is seen. So either I am creating mixins incorrectly or loading them incorrectly, either way I have no idea why I am getting "undefined is not a function"

/** @jsx React.DOM */

var Pagination = React.createClass({

  mixins: [PaginationMixin],

  popTypes: {
    totalPages: React.PropTypes.number.isRequired,
    currentPage: React.PropTypes.number.isRequired,
    maxPagesForDisplay: React.PropTypes.number.isRequired
  },

  getDefaultProps: function() {
    return {
      href: '',
      totalPages: 0,
      currentPage: 1,
      maxPagesForDisplay: 10
    };
  },

  render: function() {

    this.setPrevious();
    this.setNext();

    return(
      <div>
        <ul className="pagination">
          <li className={this.activePreviousClass}><a href={this.previousHref}>{'<<'}</a></li>
          {this.createPageBlocks()}
          <li className={this.activeNextClass}><a href={this.nextHref}>{'>>'}</a></li>
        </ul>
      </div>
    );
  }

});


// Pagination Mixin
var PaginationMixin = {

  activePreviousClass: '',

  activeNextClass: '',

  previousHref: '#',

  nextHref: '#',

  pageNumber: 0,

  createArrayoFPages: function() {
    var pageBlocks = new Array();
    var page = 0;
    var totalPages = this.props.totalPages +1;

    while (page < totalPages) {
      pageBlocks[page++] = page;
    }

    return pageBlocks;
  },

  setPrevious: function() {
    if (Number(this.props.currentPage) === 1) {
      this.activePreviousClass = 'disabled';
    } else {
      this.pageNumber = Number(this.props.currentPage) - 1;
      this.previousHref = '#' + this.props.href + pageNumber;
    }
  },

  setNext: function() {
    if (Number(this.props.currentPage) === this.props.totalPages + 1){
      this.activeNextClass = 'disabled';
    } else {
      this.pageNumber = Number(this.props.currentPage) + 1;
      this.nextHref = '#' + this.props.href + pageNumber;
    }
  },

  createPageBlocks: function() {
    console.log('asdasdsa')
    var pages = this.createArrayoFPages().map(function(page){
      var currentActivePage = '';

      if (Number(this.props.currentPage) === page) {
        currentActivePage = 'active';
      }

      return(
        <li className={currentActivePage}><a href={"#" + this.props.href + page}>{page}</a></li>
      );
    }.bind(this));

    return pages;
  }
}


React.render(<Pagination totalPages={5} currentPage={2} maxPagesForDisplay={10} href={'#'} />, document.body);