<p dir="auto">Recently updated to 0.12.2 and a checkbox element hooked up to <code class="notranslate">this.props</code> is dynamically updating in the browser. Using the React inspector for Chrome, <code class="notranslate">this.props.item.isActive</code> seems to be toggling fine, but for some reason the changes don't propagate into the DOM. Not sure if this is specific to the update, or I've messed something up that I don't realize.</p>
<p dir="auto">Here's my render function:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="render: function() {
  let className = '';
  if (this.props.item.isActive) className = 'is-active';

  return (
    &lt;li className={className}&gt;
      &lt;div className=&quot;view&quot;&gt;
        &lt;input
          className=&quot;toggle&quot;
          type=&quot;checkbox&quot;
          checked={this.props.item.isActive}
          onChange={this.toggleActive}
        /&gt;
        &lt;span&gt;{this.props.item.text}&lt;/span&gt;
        &lt;button className=&quot;destroy-item&quot; onClick={this.destroyItem}&gt;&lt;/button&gt;
      &lt;/div&gt;
    &lt;/li&gt;
  );
}"><pre class="notranslate">render: <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">let</span> <span class="pl-s1">className</span> <span class="pl-c1">=</span> <span class="pl-s">''</span><span class="pl-kos">;</span>
  <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">item</span><span class="pl-kos">.</span><span class="pl-c1">isActive</span><span class="pl-kos">)</span> <span class="pl-s1">className</span> <span class="pl-c1">=</span> <span class="pl-s">'is-active'</span><span class="pl-kos">;</span>

  <span class="pl-k">return</span> <span class="pl-kos">(</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">li</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">className</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"view"</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">input</span>
          <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"toggle"</span>
          <span class="pl-c1">type</span><span class="pl-c1">=</span><span class="pl-s">"checkbox"</span>
          <span class="pl-c1">checked</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">item</span><span class="pl-kos">.</span><span class="pl-c1">isActive</span><span class="pl-kos">}</span>
          <span class="pl-c1">onChange</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">toggleActive</span><span class="pl-kos">}</span>
        <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">span</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">item</span><span class="pl-kos">.</span><span class="pl-c1">text</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">span</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">button</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"destroy-item"</span> <span class="pl-c1">onClick</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">destroyItem</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">button</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">li</span><span class="pl-c1">&gt;</span>
  <span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">When using AMD, a component might use React as a dependency.  This poses a problem when another instance of React has already manipulated the DOM.  The wrong events get fired, or ID collisions occur (<em>Invariant Violation: ReactMount: Two valid but unequal nodes with the same <code class="notranslate">data-reactid</code>: .0</em>).</p>
<p dir="auto">jsbin here:  <a href="http://jsbin.com/riqotavoxa/11/edit?js,output" rel="nofollow">http://jsbin.com/riqotavoxa/11/edit?js,output</a><br>
SO here for internet points: <a href="http://stackoverflow.com/q/28685857/614523" rel="nofollow">http://stackoverflow.com/q/28685857/614523</a><br>
Google Group post here:  <a href="https://groups.google.com/forum/#!topic/reactjs/RRDUaF19CM0" rel="nofollow">https://groups.google.com/forum/#!topic/reactjs/RRDUaF19CM0</a></p>