title: What is weird "/.$" or ".$" in the react key name?
body: <p>I need to put the change children with some element like div in react component. and I found lot of way to do that.</p>
  <p>The problem is when I create a holder element over the child and give right key to the holder but the react added some weird character to the key and change my key.</p>
  <p>I want to use <code>react-grid-layout</code> but the keys should be the same of the layout config props. so, I need to react stop changing the keys.</p>
  <p>Here is my code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class Main extends React.Component {
      render() {
          const { index, children } = this.props;
  
                  // Sample1: /.$
          const childWithHolders1 = React.Children.map(children, child =&gt; (
              &lt;div key={"holder" + child.key}&gt;
                  holder key: {"holder" + child.key}
              &lt;/div&gt;
          ));
  
          const realReactKeys1 = childWithHolders1.map(divComp =&gt; divComp.key + "\n");
  
                  // Sample2: .$ (just pass number to the key)
          const childWithHolders2 = React.Children.map(children, child =&gt; (
              &lt;div key={child.key}&gt;
                  holder key: {child.key}
              &lt;/div&gt;
          ));
  
          const realReactKeys2 = childWithHolders2.map(divComp =&gt; divComp.key + "\n");
          
          return (
              &lt;div&gt;
                  &lt;h2&gt;Sample 1&lt;/h2&gt;
                  {childWithHolders1}
                  &lt;br /&gt;
                  &lt;h3&gt;The Real React Keys: &lt;/h3&gt;
                  &lt;pre&gt;{realReactKeys1}&lt;/pre&gt;
                  
                  &lt;br /&gt;&lt;h2&gt;Sample 2&lt;/h2&gt;
                  {childWithHolders2}
                  &lt;br /&gt;
                  &lt;h3&gt;The Real React Keys: &lt;/h3&gt;
                  &lt;pre&gt;{realReactKeys2}&lt;/pre&gt;
              &lt;/div&gt;
          );
      }
  }
  
  class Child extends React.Component {
      render() {
          const { index } = this.props;
          return (
              &lt;p&gt;Child Index: {index}&lt;/p&gt;
          )
      }
  }
  
  class App extends React.Component {
      constructor(props) {
          super(props)
      }
  
      render() {
          return (
              &lt;div&gt;
                  &lt;h2&gt;What is weird "/.$" or ".$" in the react key name ???&lt;/h2&gt;
                  &lt;Main&gt;
                      &lt;Child key="1" index="1" /&gt;
                      &lt;Child key="2" index="1" /&gt;
                      &lt;Child key="3" index="1" /&gt;
                  &lt;/Main&gt;
              &lt;/div&gt;
          )
      }
  }
  
  ReactDOM.render(&lt;App /&gt;, document.querySelector("#root"))</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;
  &lt;div id="root"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>