I'm a JS/React/MobX/else newbie, trying to do something very simple without success.
What I want is - 2 buttons, once clicked, show corresponding tab in a modal, using react-bootstrap and mobx.
But I keep getting this error:
[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
Please help. Much appreciated.
code for the store:
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;
react component:
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 (
<div className="nav navbar-nav navbar-right">
{/* login / signup buttons in navbar */}
<ul className="nav navbar-nav btn-toolbar">
<li className="btn-group">
<p className="navbar-btn text-uppercase">
<a onClick={this.handleClick.bind(this)} className="btn btn-default">Log In</a>
</p>
</li>
<li className="btn-group">
<p className="navbar-btn text-uppercase">
<a onClick={this.handleClick.bind(this)} className="btn btn-primary">Sign Up</a>
</p>
</li>
</ul>
<AuthModal />
</div>
);
}
}