Building a TabBar Component
Understand how to create a TabBar component in React that tracks active tabs and updates the UI on clicks. Explore using container components to manage state and presentational components to render tabs with Semantic-UI.
We'll cover the following...
We’re going to need to track which tab is active, change that on click, and re-render the tab list. We also will eventually need to swap which content panel is visible as well. I added a <TabBar> component that takes an array of tab names and labels and renders the tabs. Now, we could have the <TabBar> store the value of which tab is currently selected, but it’s a good practice in React to write “container components” which store the state, and keep other components that are “presentational” and just display things based on the props they’re given. So, we’ll create a <TabBarContainer> component to track which tab is currently selected: