1) У тебя в компоненте нет ничего, ради чего используются класс (жизненных циклов, состояния и т.д.), в этом случае лучше использовать компонент-функцию
2) Если варианта разметки всего два у тебя, я бы сделал так:
а) прописал бы каждый вариант в отдельный функциональный компонент
б) затем в родительском компоненте, там где рендеринг, вставил бы следующую конструкцию:
{(cardType=='search')?<Component1 img={...} name={...}/>:<Component2 img={...} name={...}/>}
В принципе, в React данные так и передаются - по всему дереву сверху вниз. Других вариантов нет.
3) HOC (он же компонент высшего порядка) - компонент, который содержит логику, принимает презентационный компонент, и рендерит его, передавая свои данные. В одном случае будет принимать первый твой компонент с разметкой, в другом - второй.
А делать switch прям на месте - к сожалению, уменьшает читабельность и реюзабельность кода.
