title: React / JSX Dynamic Component Name
body: <p>I am trying to dynamically render components based on their type.</p>
  
  <p>For example:</p>
  
  <pre><code>var type = "Example";
  var ComponentName = type + "Component";
  return &lt;ComponentName /&gt;; 
  // Returns &lt;examplecomponent /&gt;  instead of &lt;ExampleComponent /&gt;
  </code></pre>
  
  <p>I tried the solution proposed here <a href="https://stackoverflow.com/questions/28842459/react-jsx-dynamic-component-names">React/JSX dynamic component names</a></p>
  
  <p>That gave me an error when compiling (using browserify for gulp). It expected XML where I was using an array syntax.</p>
  
  <p>I could solve this by creating a method for every component:</p>
  
  <pre><code>newExampleComponent() {
      return &lt;ExampleComponent /&gt;;
  }
  
  newComponent(type) {
      return this["new" + type + "Component"]();
  }
  </code></pre>
  
  <p>But that would mean a new method for every component I create. There must be a more elegant solution to this problem.</p>
  
  <p>I am very open to suggestions.</p>