CODEWITHSUNDEEP
reactjs
james emanon
james emanon

Reputation: 11807

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

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?

Upvotes: 1

Views: 2559

Answers (1)

zerkms
zerkms

Reputation: 254926

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

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

References:

Upvotes: 6

Related Questions