Render React Component assigned from an import to a variable.. how?

Question

So, I have a need for dynamic determination of which component to show.. so, for example. I have:

import Component1 from '..somepath/Component1'
import Component1 from '..somepath/Component2'

var P = {
   red: Component1,
   blue: Component2
}

render() {
  var newComponent = P[color];
  return (
     <newComponent /> // not working
     {newComponent} // not working
    newComoponent // not working

  )
}

this mapping could be huge, thus not doing a switch or if/else.

how do I get this to return in another component?

Answer 1

As per the convention the component name must be with the first letter capitalised:

render() {
  var NewComponent = P[color];
  return (
     <NewComponent />
  );
}

References:

• https://facebook.github.io/react/docs/jsx-in-depth.html#html-tags-vs.-react-components