Why am I getting undefined is not a function, ReactJs

Question

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);

Answer 1

You are using PaginationMixin before it is defined. So you are mixing undefined into your class. You can fix this by moving your mixin definition before creating your class.

In addition, you need to change pageNumber to this.pageNumber in your mixin methods.

Updated, sort of working, code here: fiddle