<p dir="auto">React version: 16.12.0</p>
<h2 dir="auto">Steps To Reproduce</h2>
<ol dir="auto">
<li>Use <code class="notranslate">renderToString</code> to render <code class="notranslate">&lt;source&gt;</code> element with <code class="notranslate">srcset</code> attribute</li>
</ol>

<p dir="auto">Link to code example: <a href="https://codesandbox.io/s/react-dom-camelcase-bug-1rnxt" rel="nofollow">https://codesandbox.io/s/react-dom-camelcase-bug-1rnxt</a></p>

<h2 dir="auto">The current behavior</h2>
<p dir="auto"><code class="notranslate">srcSet</code> isn't transformed to <code class="notranslate">srcset</code></p>
<h2 dir="auto">The expected behavior</h2>
<p dir="auto"><code class="notranslate">srcSet</code> becomes <code class="notranslate">srcset</code></p>
<p dir="auto">There seems to be a lot of misunderstanding in the react community about how <code class="notranslate">defaultValue</code> works. It is often expected that if the <code class="notranslate">defaultValue</code> of an element is changed then that should be reflected in the UI. This is not the case since <code class="notranslate">defaultValue</code> is only set when the component is first rendered.</p>
<p dir="auto">When people complain about this (<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="32854511" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/1484" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/1484/hovercard" href="https://github.com/facebook/react/issues/1484">#1484</a>, <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="35240087" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/1663" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/1663/hovercard" href="https://github.com/facebook/react/issues/1663">#1663</a>, <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="52674317" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/2764" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/2764/hovercard" href="https://github.com/facebook/react/issues/2764">#2764</a>) it is usually suggested that they use <code class="notranslate">value</code> instead of <code class="notranslate">defaultValue</code> but this is often seen as unpractical in a form were there are many input fields since all fields now need an <code class="notranslate">onChange</code> listener to be editable. (This is not actually true, you can put an <code class="notranslate">onChange</code> listener on a wrapping element but this generates a lot of warnings <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="27759736" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/1118" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/1118/hovercard" href="https://github.com/facebook/react/issues/1118">#1118</a>, <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="56754472" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/3070" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/3070/hovercard" href="https://github.com/facebook/react/issues/3070">#3070</a>).</p>
<p dir="auto">I feel that none of the above solutions are practical, but an easy solution is to set a <code class="notranslate">key</code> attribute on a wrapping element. If the form contains elements with <code class="notranslate">defaultValue</code> fields that are changed along with the key, the change will be reflected in the UI.</p>
<p dir="auto">I think this is a good solution for a common UI case where you have a list of entities you want to be able to edit. If you click one of them a form shows up with the entity value populated and if you click on another element you want the form to be updated with that entity's data.</p>
<p dir="auto">Perhaps it could be documented in order to avoid future confusion. Or is there an even better solution?</p>