title: react-swipe API & Invariant Violation w/ ReactJS
body: <p>I'm getting an Invariant Violation error. I'm trying to get <code>react-swipe</code> working with next/prev API calls.</p>
  
  <p>It's something to do with <code>this.setState()</code> in <code>nextPanel()</code>, guessing you can't call <code>setState</code> in <code>render()</code>. Not sure how to fix this ?</p>
  
  <p>btw - I made changes to my local copy of <code>react-swipe</code> trying to get the swipe.js API working for slide(). See my changes here: <a href="http://jsfiddle.net/0o1737ya/" rel="nofollow">http://jsfiddle.net/0o1737ya/</a></p>
  
  <p>Main <code>react-swipe</code> page: <a href="https://github.com/jed/react-swipe" rel="nofollow">https://github.com/jed/react-swipe</a></p>
  
  <p>Another question is why does <code>nextPanel()</code> get called before I click on the <code>&lt;div&gt;</code> with the <code>onClick()</code> event? I added a bunch of <code>console.log()'s</code> and noticed this happening.</p>
  
  <pre><code>var MyPrizesCarousel = React.createClass({
    getInitialState: function() {
      return {
        panelIdx: 0,
        isNext: false
      };
    },
  
      nextPanel: function(index) {
        newPanelIdx = this.state.panelIdx + 0;
  
        this.setState( {panelIdx: index} );
        this.setState( {isNext: true} );
      },
  
     render: function() {
        var swipeOptions = {
          continuous: false
        }
  
       this.carousel = (
            &lt;Swipe continuous={false} panelIdx={this.state.panelIdx} isNext={this.state.isNext} &gt;
              &lt;div&gt;
                &lt;MyPrizesPane1 nextPanel={this.nextPanel} /&gt;
              &lt;/div&gt;
              &lt;div&gt;
                &lt;MyPrizeOne /&gt;
              &lt;/div&gt;
              &lt;div&gt;
                &lt;MyPrizeTwo /&gt;
              &lt;/div&gt;
            &lt;/Swipe&gt;
          );
  
        return (
           &lt;div&gt;
              &lt;div&gt;{this.carousel}&lt;/div&gt;        
           &lt;/div&gt;
        );
    } 
  });
  
  
  var MyPrizesPane1 = React.createClass({
    nextPanel: function(index) {
      this.props.nextPanel(index);
    },
  
     render: function() {
        return (
           &lt;div&gt;
              &lt;div onClick={this.nextPanel(1)}&gt;
                &lt;img  className="menu-button" src="static/images/big-prize.gif" /&gt;
              &lt;/div&gt;
  
              &lt;div onClick={this.nextPanel(2)}&gt;
                &lt;img className="menu-button" src="static/images/grand-prize.jpg" /&gt;
              &lt;/div&gt;           
           &lt;/div&gt;
        );
    } 
  }); 
  </code></pre>
  
  <p>NOTE: I left out a few ReactJS components from above code as they are trivial and shouldn't affect the fix.</p>