<p dir="auto">It seems that if you're conditionally rendering between two elements then they can't have a different root node, for example switching between an input and a div. In order to get around the issue you have to wrap everything in a common container element for React to be able to handle it.</p>
<p dir="auto">Sample plunkr is <a href="http://plnkr.co/edit/uXXZCctefi4IH22SCtPA?p=preview" rel="nofollow">here</a> which demonstrates the behavior. I'd expect in this case it to switch between showing 'Test' and 'Test 2' when activating the checkbox, instead it ends up duplicating the node.</p>
<p dir="auto">Interestingly I don't get any errors in this simplified test case, in a more complex app React complains about two unrelated nodes sharing the same React id after activating the checkbox.</p>
<p dir="auto">Hi,</p>
<p dir="auto">I am pretty new to react, and I am trying to build a DIV that requests an image-scaling service on the backend for images in specific resolutions, to do this I need to use CSS image-set, this CSS value need vendor prefixes, but the CSS key does not, my problem is that I can't have duplicate keys in the style object. I ended up manually setting the style attribute in componentDidUpdate, but it is a hack to get around the system. I suggest that you could perhaps also expect an array of key value pairs, then I could do like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[{backgroundImage : 'value1'}, {backgroundImage : 'value 2'}]"><pre class="notranslate"><code class="notranslate">[{backgroundImage : 'value1'}, {backgroundImage : 'value 2'}]
</code></pre></div>
<p dir="auto">a specific example of the css I am trying to modify can be found here.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="height : 818px;
width : 1440px;
background-size : cover;
background-image : url(https://images.blockbuster.dk/movie/divergent?width=1440&amp;height=818);
background-image : -webkit-image-set(url(https://images.blockbuster.dk/movie/divergent?width=1440&amp;height=818) 1.0x, url(https://images.blockbuster.dk/movie/divergent?width=2880&amp;height=1636) 2.0x);
background-image : -moz-image-set(url(https://images.blockbuster.dk/movie/divergent?width=1440&amp;height=818) 1.0x, url(https://images.blockbuster.dk/movie/divergent?width=2880&amp;height=1636) 2.0x);
background-image : -ms-image-set(url(https://images.blockbuster.dk/movie/divergent?width=1440&amp;height=818) 1.0x, url(https://images.blockbuster.dk/movie/divergent?width=2880&amp;height=1636) 2.0x);
background-image : -o-image-set(url(https://images.blockbuster.dk/movie/divergent?width=1440&amp;height=818) 1.0x, url(https://images.blockbuster.dk/movie/divergent?width=2880&amp;height=1636) 2.0x)"><pre class="notranslate"><code class="notranslate">height : 818px;
width : 1440px;
background-size : cover;
background-image : url(https://images.blockbuster.dk/movie/divergent?width=1440&amp;height=818);
background-image : -webkit-image-set(url(https://images.blockbuster.dk/movie/divergent?width=1440&amp;height=818) 1.0x, url(https://images.blockbuster.dk/movie/divergent?width=2880&amp;height=1636) 2.0x);
background-image : -moz-image-set(url(https://images.blockbuster.dk/movie/divergent?width=1440&amp;height=818) 1.0x, url(https://images.blockbuster.dk/movie/divergent?width=2880&amp;height=1636) 2.0x);
background-image : -ms-image-set(url(https://images.blockbuster.dk/movie/divergent?width=1440&amp;height=818) 1.0x, url(https://images.blockbuster.dk/movie/divergent?width=2880&amp;height=1636) 2.0x);
background-image : -o-image-set(url(https://images.blockbuster.dk/movie/divergent?width=1440&amp;height=818) 1.0x, url(https://images.blockbuster.dk/movie/divergent?width=2880&amp;height=1636) 2.0x)
</code></pre></div>