title: ReactJS mobx - does not update observable array
body: <p>If you have an <code>observable</code> list in your store:</p>
  
  <pre><code>@obserable public Claimslist: IClaim[] = [];
  </code></pre>
  
  <p>where <code>IClaim</code> is an interface, <code>claims</code> is an array of <code>IClaim</code> objects</p>
  
  <p><code>IClaim</code> contains a varaible in its object called <code>moveOutDate</code>
  Each claim object has <code>id</code> variable.</p>
  
  <p>And now you want to update or get that variable by the <code>claim</code> id</p>
  
  <p>So you have 2 functions:</p>
  
  <p><strong>Get</strong></p>
  
  <pre><code>  /**
     * Gets the moveOutDate of a claim by claim ID
     */
    @action getMoveOutDateById = (id: string) =&gt; {
      // Get the claim by id
      const claim = this.Claimslist.find((element: IClaim) =&gt; element.id === sessionStorage.getItem('claim-id'));
      if (claim) {
        if (!claim.moveOutDate) {
          return undefined;
        }
        return moment(new Date(claim.moveOutDate)).toDate();
      }
  
      return undefined;
    }
  </code></pre>
  
  <p><strong>Set</strong></p>
  
  <pre><code>  /**
     * Sets moveOutDate in claim by claim ID
     */
    @action public setMoveOutDate = (id: string, date: Date) =&gt; {
      const claim = this.Claimslist.find((element: IClaim) =&gt; element.id === id);
      if (claim) {
        claim.moveOutDate = date.toString();
      }
    }
  </code></pre>
  
  <p>Okey, but now when you use <code>getMoveOutDateById</code> at first in your <code>render</code> it works and renders the date, but once you call <code>setMoveOutDate</code> <code>onUpdate</code> of the date component, the render won't update, but the store will update and you can only see changes if you refresh the page.</p>
  
  <p>Now I managed to solve it, by doing:</p>
  
  <pre><code>this.Claimslist = this.Claimslist.slice();
  </code></pre>
  
  <p>and adding an hidden input of Claimslist:</p>
  
  <pre><code>const {Claimslist} = this.props.claimsStore;
  </code></pre>
  
  <p>and</p>
  
  <pre><code>&lt;input type="hidden" value={Claimslist} /&gt;
  </code></pre>
  
  <p>Why does it happen, if the whole object is <code>obserable</code> and is wrapped with <code>@action</code> why doesn't it change without using <code>slice()</code> and having an hidden input?</p>