The following code has firstTab contents in a separate tsx file which is good. Just like that I can also have SecondTab contents in a separate file.
https://stackblitz.com/edit/react-ts-y7i3rr?file=index.tsx
So, if I have 20 tabs, I would need to have 20 different files.What would be an efficient approach to minimize this overhead?
Also, in index.tsx, I would have 20 different case statements like this:
private initWidgets = (tab: any) => {
switch (tab) {
case 0:
render(<FirstTab />, this.gridElement.current!);
break;
case 1:
this.initGrid2();
break;
}
};
Is it possible to loop through and generate these switch statements dynamically if I keep pulling case values dynamically?