CODEWITHSUNDEEP
reactjsmobx
Joshua Edwards
Joshua Edwards

Reputation: 11

mobx not updating react view

I am trying to use Mobx to build a simple counter in react. I can see that it is updating the value in the class, but the updated value isn't getting updated in the react view.

Here is my code

import {observable} from 'mobx';
import {observer} from 'mobx-react';
import React, {Component} from 'react';
import ReactDOM from 'react-dom';

class CounterStore {
  @observable counter;

  constructor(){
    this.counter = 0;
  }

  increase(){
    this.counter++;
  }

  decrease(){
    this.counter--;
  }
}

@observer
class Counter extends Component {
  render(){
    const counter = this.props.counter;
    return(
      <div style={{display: 'flex'}}>
        <button onClick={counter.increase.bind(counter)}>+</button>
        <p style={{color: 'black', marginRight: '1rem', marginLeft: '1rem'}}>{counter.counter}</p>
        <button onClick={counter.decrease.bind(counter)}>-</button>
      </div>
    );
  }
}

const store = new CounterStore();

ReactDOM.render(
  <Counter counter={store} />,
  document.getElementById('app')
);

Upvotes: 1

Views: 1444

Answers (1)

mweststrate
mweststrate

Reputation: 4978

I just tried your code in a JSFiddle and it seems to run without issues?

http://jsbin.com/bocabefuji/1/edit?html,js,console,output

Upvotes: 2

Related Questions