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

Question

[AlexKindGeek]

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

{value === 0 && <TabContainer>Item One</TabContainer>}
{value === 1 && <TabContainer>Item Two</TabContainer>}
{value === 2 && <TabContainer>Item Three</TabContainer>}
{value === 3 && <TabContainer>Item Four</TabContainer>}
{value === 4 && <TabContainer>Item Five</TabContainer>}
{value === 5 && <TabContainer>Item Six</TabContainer>}
{value === 6 && <TabContainer>Item Seven</TabContainer>}

Как можно это избежать (упростить)?

ПРИМЕР

Answer 1

[0xD34F]

Кладёте в state массив:

items: [ 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven' ]

А в render станет так:

<TabContainer>Item {this.state.items[value]}</TabContainer>

UPD. А если добавить в массив ещё и иконки, то и рендеринг Tab'ов тоже упростится.