title: How to setAttribute on React JSX element dynamically?
body: <p>I want to set <code>key</code> attribute on React element dynamically, like below. However both approaches do not work. I know I can use other technique for that, but I'd like to know if it is possible to do so this way:</p>
  
  <p>One:</p>
  
  <pre><code>{
      new Array(3).fill(&lt;td&gt;&lt;/td&gt;).map((td,i) =&gt; {
          td.setAttribute('key', i);
          return td;
      })
  }
  </code></pre>
  
  <p>Two:</p>
  
  <pre><code>{
      new Array(3).fill(document.createElement(td)).map((td,i) =&gt; {
          td.setAttribute('key', i);
          return td;
      })
  }
  </code></pre>
  
  <p>The error</p>
  
  <pre><code>// td is {$$typeof: Symbol(react.element), type: "td", key: null, ref: null, props: {…}, …}
  // Uncaught (in promise) TypeError: td.setAttribute is not a function
  </code></pre>