Mobx components re-rendering of components after state changes

891 views Asked by At

I'm introducing Mobx in my React application. The application was not using any framework(Flux Redux, etc).

On each component i first inject the state using the inject decorator of the mobx-react package:

const React = require('react');
import {observer, inject} from 'mobx-react';

@inject('myState') @observer
class MyComponent extends React.Component{...}

On updates i change directly the state on the onChange method of the component, the state contains an array of objects(blocks) and each block has some specific properties:

onChange = (event) => {
    this.props.myState['blocks'][this.props.index][event.target.name] = event.target.value;
  }

I then render the component using the value fetched from the state.

render = () => {
    const value = this.props.myState['blocks'][this.props.index]['myInput'];

    console.log('re rendering...');

    return (
        <div>
            <textarea value={value}
                      onChange={this.onChange} />
      </div>
    );
  }

But actually it seems like the render function is not triggered after the onChange has been executed and the state myState changed.

Any suggestions about how come the re render is not triggered even if the component is a state subscriber?

0

There are 0 answers