title: MobX Invariant failed: Side effects like changing state are not allowed at this point
body: <p>I'm a JS/React/MobX/else newbie, trying to do something very simple without success.</p>
  
  <p>What I want is - 2 buttons, once clicked, show corresponding tab in a modal, using react-bootstrap and mobx.</p>
  
  <p>But I keep getting this error:</p>
  
  <p><strong>[mobx] Encountered an uncaught exception that was thrown by a reaction or observer component, in: 'Reaction[AuthModal#0.render()] Error: [mobx] Invariant failed: Side effects like changing state are not allowed at this point. Are you trying to modify state from, for example, the render function of a React component? Tried to modify: AuthModalStore@3.tab</strong></p>
  
  <p>Please help. Much appreciated.</p>
  
  <p>code for the store:</p>
  
  <pre><code>import { observable } from 'mobx';
  
  class AuthModalStore {
  
    @observable show = false;
    @observable tab = 1;
  
    constructor() {
      this.turnOn = this.turnOn.bind(this);
      this.turnOff = this.turnOff.bind(this);
      this.changeToTab = this.changeToTab.bind(this);
    }
  
    turnOn(key = 1) {
      console.log('running turnOn');
      this.tab = key;
      this.show = true;
    }
  
    turnOff() {
      this.show = false;
    }
  
    changeToTab(key) {
      this.tab = key;
    }
  
  }
  
  const store = new AuthModalStore();
  
  export default store;
  </code></pre>
  
  <p>react component:</p>
  
  <pre><code>import React from 'react';
  import { inject, observer } from 'mobx-react';
  
  import AuthModal from './AuthModal';
  
  
  @inject('authModalStore')
  @observer
  export default class AuthButtons extends React.Component {
  
    handleClick(event) {
      var key;
      switch (event.target.innerHTML) {
        case 'Log In':
          key = 1;
          break;
        case 'Sign Up':
          key = 2;
          break;
        default:
          key = 1;
      }
      this.props.authModalStore.turnOn(key);
    }
  
    render() {
      return (
        &lt;div className="nav navbar-nav navbar-right"&gt;
          {/* login / signup buttons in navbar */}
            &lt;ul className="nav navbar-nav btn-toolbar"&gt;
              &lt;li className="btn-group"&gt;
                &lt;p className="navbar-btn text-uppercase"&gt;
                  &lt;a onClick={this.handleClick.bind(this)} className="btn btn-default"&gt;Log In&lt;/a&gt;
                &lt;/p&gt;
              &lt;/li&gt;
              &lt;li className="btn-group"&gt;
                &lt;p className="navbar-btn text-uppercase"&gt;
                  &lt;a onClick={this.handleClick.bind(this)} className="btn btn-primary"&gt;Sign Up&lt;/a&gt;
                &lt;/p&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
            &lt;AuthModal /&gt;
          &lt;/div&gt;
        );
      }
    }
  </code></pre>