Rendering Tab Panels
We'll cover the following...
Right now the tab bar only shows the tabs themselves, but no content. We really need to show a different component as the content for each tab, and swap which component is visible as the active tab changes.
One way to do this would be to actually change which component is being rendered for the content panel each time the currentTab
prop changes. Another would be to always render all the tabs, but toggle the visibility instead of un-rendering them. We’re going to go with toggling visibility, just because I feel like it.
There’s some existing libraries out there like react-toggle-display
which implement this functionality already, but it’s pretty simple to do. So, we’ll do it ourselves.
...