How to render certain markup depending on a condition?

Question

JavaScript

There is such a React component, it changes the markup depending on the condition (in the example, the markup is the same, because I haven’t changed the markup yet), I don’t want to put other markup into a separate component, because in fact, the same data is used and this is one logical part, it makes no sense to take it out.
But I am getting error

https://codepen.io/anon/pen/KboVLm?editors=1010

Answer 1

switch(this.props.cardType) {

No, you don't have to. It is better to make an object where the keys will be these cardType, and the values ​​will be pieces of code taken out in separate components from cases. Then the logic of choosing what to render will be reduced to ... In general, it will be very short and simple:

const Component = components[this.props.cardType];
return Component && <Component {...this.props} />;

https://jsfiddle.net/ptm0zay7/1/