title: JSX with a HTML tag from a variable
body: <p>I have a React component defined in JSX which returns a cell using either <code>td</code> or <code>th</code>, e.g.:</p>
  
  <pre><code>if(myType === 'header') {
    return (
      &lt;th {...myProps}&gt;
        &lt;div className="some-class"&gt;some content&lt;/div&gt;
      &lt;/th&gt;
    );
  }
  
  return (
    &lt;td {...myProps}&gt;
      &lt;div className="some-class"&gt;some content&lt;/div&gt;
    &lt;/td&gt;
  );
  </code></pre>
  
  <p>Would it be possible to write the JSX in such a way that the HTML tag is taken from a variable? Like:</p>
  
  <pre><code>let myTag = myType === "header" ? 'th' : 'td';
  return (
    &lt;{myTag} {...myProps}&gt;
      &lt;div className="some-class"&gt;some content&lt;/div&gt;
    &lt;/{myTag}&gt;
  );
  </code></pre>
  
  <p>The above code returns an error "unexpected token" pointing at <code>{</code>. I am using webpack with a babel plugin to compile JSX.</p>