Как можно упростить рендер компонента?

Question

[campus1]

Всем привет. Делаю табы через material ui и мне не очень нравится такая штука:

{value === 0 && <UserActivityJournal data={therapySessionData} />}
{value === 1 && <TherapyActivity data={data} openDetail={this.openSelfDiagnosisQA}/>}
{value === 2 && <LoginHistory userId={userId} />}

Если табов будет 5+ или же 10+ то это будет дико не читабельно

Как можно это упростить?

Answer 1

[Антон Спирин]

renderTab(index) {
  switch(index) {
    case 0:
      return <UserActivityJournal data={therapySessionData} />;
    /* ... */
  }
}

Так вы избежите кучи ненужных проверок, каждый render.