Abstracting tab content

If your application uses tabs in several places, you can create abstractions that simplify the markup involved with rendering tabs and tab content. Instead of having tab content defined outside of the tabs component, why not have everything be self-contained and easier to read?

How to do it...

Let's say that your app uses tabs in several places throughout your app, and you want to simplify the markup used to create the tabs and the tab content. In the places where you use tabs, you just want to be able to render the content and not have to worry about handing state for the active tab. Here's some code that creates two new components that simplify the JavaScript XML (JSX) required for rendering...