title: ReactJS: programmatically change component tag with JSX
body: <p>I am making a conditional component that returns <code>&lt;a&gt;</code> if <em>href</em> is defined and returns <code>&lt;div&gt;</code> if not. I am doing this way:</p>
  
  <pre><code>const Label = ({children, ...other}) =&gt; {
      let component;
      if (other.href)
          component =
              &lt;a {...other}&gt;
                  { children }
              &lt;/a&gt;
      else
          component =
              &lt;div {...other}&gt;
                  { children }
              &lt;/div&gt;
  
      return component;
  }
  
  export default Label
  </code></pre>
  
  <p>There is any way to make this component by only changing the tag name? I know that if I use the manual way of creating compontents (<code>React.createElement</code>) I can do this by changing the first argument passed, for it's a string. But with JSX it's a little different. I though something like</p>
  
  <pre><code>let component =
      &lt;{tag} {...other}&gt;
          { children }
      &lt;/{tag}&gt;
  </code></pre>
  
  <p>Is it possible?</p>