Mobx does not rerender after an item in observable array has changed

Question

I can not get the truth why the TableContainer|TableComponent component does not update its children properly.In a store i have an array of objects,when i am trying to update object property the Table does not update its values.If i replace whole array it is working though.

You can check this behaviour in this sandbox.

Documentation states that initiating observable array,makes items observable too.(docs)

Similar to objects, arrays can be made observable using observable.array(values?) or by passing an array to observable. This works recursively as well, so all (future) values of the array will also be observable.

Why is this happening?i am coming from redux background and i am trying to wrap my head around mobx with no much of success.

Answer 1

Try adding your injection directly to the TableComponent, for a stateless solution:

@inject("store")
@observer
class FlipScrollTable extends React.Component {
  componentDidMount() {}

  render() {
    var { columns, header } = this.props;
    var { array } = this.props.store;
    const classes = {};
    return (
      <table>
        <thead>
          <tr>
            {columns.map((column, i) => {
              var { header, headerStyle } = column;
              return (
                <th key={i} style={headerStyle}>
                  {header}
                </th>
              );
            })}
          </tr>
        </thead>
        <tbody>
          {array.map(row => {
            var tableCells = columns.map(column => {
              var { accessor, id, Value } = column;
              var value = _isFunction(accessor)
                ? accessor(row)
                : _get(row, accessor);

              var renderedValue = normalizeComponent(
                Value,
                { value, row },
                value
              );

              return (
                <td key={_isFunction(accessor) ? id : accessor}>
                  {renderedValue}
                </td>
              );
            });
            return <tr key={row.id}>{tableCells}</tr>;
          })}
        </tbody>
      </table>
    );
  }
}

With reference with your sandbox, it appears that you are attempting to change a component after it has been rendered; where you should re-render components directly from the observable array changes.

Answer 2

Your FlipScrollTable component should be an observer as well