<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong></p>
<p dir="auto">I want to request a feature</p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">Using <code class="notranslate">Symbols</code> as element keys throws a type error.</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (<a href="https://jsfiddle.net/Luktwrdm/" rel="nofollow">https://jsfiddle.net/Luktwrdm/</a>) or CodeSandbox (<a href="https://codesandbox.io/s/new" rel="nofollow">https://codesandbox.io/s/new</a>) example below:</strong></p>
<p dir="auto">When using <code class="notranslate">key={Symbol('myKeySymbol')}</code> we get the following <code class="notranslate">TypeError: Cannot convert a Symbol value to a string at Object.ReactElement.createElement</code></p>
<p dir="auto"><a href="https://codesandbox.io/s/733pypz57j" rel="nofollow">codesandbox here</a></p>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
Using <code class="notranslate">Symbols</code> as keys should work seamlessly, in my opinion element keys are a perfect use-case for <code class="notranslate">Symbols</code>.</p>
<p dir="auto"><strong>Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?</strong></p>
<p dir="auto">Using React <code class="notranslate">16.0.0</code> and the browsers affected are Safari, Chrome and Firefox on OSX, but I'm pretty sure this is not browser dependent but a matter of implementation.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="
Thanks."><pre class="notranslate"><code class="notranslate">
Thanks.
</code></pre></div>
<hr>
<h2 dir="auto">Please do not remove the text below this line</h2>
<p dir="auto">DevTools version: 4.0.2-2bcc6c6</p>
<p dir="auto">Call stack: at d (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:11:5744)<br>
at e.getCommitTree (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:11:8526)<br>
at Ai (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:56:274200)<br>
at Ha (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:43:55890)<br>
at bi (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:43:62939)<br>
at Xl (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:43:99535)<br>
at Hl (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:43:84255)<br>
at Fl (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:43:81285)<br>
at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:43:25363<br>
at n.unstable_runWithPriority (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:56:4368)</p>
<p dir="auto">Component stack: in Ai<br>
in div<br>
in div<br>
in div<br>
in Or<br>
in Unknown<br>
in n<br>
in Unknown<br>
in div<br>
in div<br>
in Ua<br>
in le<br>
in ve<br>
in ko<br>
in Fl</p>