Enjoy 20% off all plans by following us on social media. Check out other promotions!

Tabs Solution

Author
Yangshun TayEx-Meta Staff Engineer
Languages
HTMLCSSJS

Solution

Implementing a basic (not fully accessible) Tabs component in React is quite simple due to the fact that only one state value is needed, the currently active tab item. React also helps to keep the state and the UI in sync, which is more troublesome to do so in Vanilla JavaScript.

For simplicity sake, we'll create an uncontrolled Tabs component where the state is managed within the Tabs component. During interviews, do clarify with your interviewer if they want you to implement a controlled or uncontrolled component.

Props (API Design)

Part of the complexity of building a component is designing the API for it. In the case of React, it would be the props of the component. At the bare minimum, we will need the following props:

  • items: A list of item objects. Each item is an object with the fields:
    • value: A unique identifier for the tab item.
    • label: The text label to show in the tab item.
    • panel: The contents to show in the tab panel when the item is active.
  • defaultValue: The default tab item/panel to show. In case the defaultValue is not provided, we'll use the first item as the value. This is assuming that items is non-empty.

For controlled components, there will be a value and onChange props instead of a defaultValue prop.

Test Cases

  • All the provided items should be displayed.
  • The default active item should be reflected correctly.
  • Selecting the tab items updates the tabpanel's contents with the active tabs's panel details.
  • Test that you are able to initialize multiple instances of the component, each with independent states.

Accessibility

Accessibility is a huge factor of a good Tabs component. The ARIA Authoring Practices Guide for Tabs has a long list of guidelines for the ARIA roles, states, and properties to add to the various elements of a Tab. Tabs II and Tabs III will focus on improving the accessibility of Tabs component.