Exercise: Tab List

Inside the directory you created for this course on React, create a new folder called Exercise-7-Tab-List and put the .js solution files for this exercise within it.

Let's set up the boilerplate for our TabList component with the props listed above before we begin programming it concretely.

Here's the code to begin with:

function TabList({
   labels,
   panels,
   selected: propSelected = 0
}) {
   // Code to go here.
}

Notice the selected: propSelected = 0 part here. We're extracting the value of the selected prop and assigning it to a local propSelected variable.

We're doing this because later on we'll be using a state value named identically, and so with this change of name, we make sure that we won't encounter an error while defining our state value (using const).

Great. So now let's think on the implementation of TabList.

We'll use a container element for our entire tabbed navigation UI, and call it .tablist. We'll denote it using the HTML <section> element since a tabbed navigation represents a whole, discrete section in a web app.

Within this container, we'll first have a <div> holding all our tab labels, each one named .tablist_label (following the BEM naming convention with a slight twist of our own), and then have a <main> element representing the content (the panel) of the currently selected tab.

The content of this first child <div> of .tablist will simply be rendered by mapping over the labels prop (remember, it's a list) and creating a <button> for each item, whose class would be .tablist_label.

As for the content of the <main> element, it will be obtained from the panels prop (which is also a list) by accessing the item sitting at index selected from it.

Here's the code we get thus far:

import { useState } from 'react';

function TabList({
   labels,
   panels,
   selected: propSelected = 0
}) {
   const [selected, setSelected] = useState(propSelected);

   return (
      <section className="tablist">
         <div>
            {labels.map((label, i) => (
               <button
                  key={i}
                  className="tablist_label"
               >{label}</button>
            ))}
         </div>
         <main>
            {panels[selected]}
         </main>
      </section>
   );
}

Notice the selected state defined here. At any given point, our TabList component needs to be aware of the index of the currently selected tab, and that's precisely what selected is here for.

It's initialized using the value providing in via the selected prop, which itself is stored in a propSelected variable in order to prevent a name collision between the prop and the state constant.

Furthermore, if we take a look into the rendering of the list of <button>s, as stated in the React Rendering Lists chapter, the key prop assigned to each <button> here is required by React since we are rendering a list of items.

Now, there are mainly two things left to be done in this code. One is to make the buttons interactive and second is to assign an additional class to a <button> that corresponds with the currently selected tab.

Starting with the former, what should be done upon the click of each button? Well, the selected state should be changed to the index of the button clicked.

Very simple.

In the following code, we add an onClick handler to the <button>, leveraging the i parameter from the callback provided to map() to be given to setSelected():

import { useState } from 'react';

function TabList({
   labels,
   panels,
   selected: propSelected = 0
}) {
   const [selected, setSelected] = useState(propSelected);

   return (
      <section className="tablist">
         <div>
            {labels.map((label, i) => (
               <button
                  key={i}
                  className="tablist_label"
                  onClick={() => setSelected(i)}
               >{label}</button>
            ))}
         </div>
         <main>
            {panels[selected]}
         </main>
      </section>
   );
}

Now, let's get to the latter concern — giving an additional class to the button corresponding to the currently selected tab.

Again, this is also really simple. We just ought to check while rendering the list of <button>s that whether the current item's index is the same as the value of the selected state, and if it is, add a second .tablist_label--sel to it.

Let's get this done:

import { useState } from 'react';

function TabList({
   labels,
   panels,
   selected: propSelected = 0
}) {
   const [selected, setSelected] = useState(propSelected);

   return (
      <section className="tablist">
         <div>
            {labels.map((label, i) => (
               <button
                  key={i}
                  className={'tablist_label' + (selected === i ? ' tablist_label--sel' : '')}
                  onClick={() => setSelected(i)}
               >{label}</button>
            ))}
         </div>
         <main>
            {panels[selected]}
         </main>
      </section>
   );
}

And with this, we've successfully implemented every single aspect of our tabbed navigation from a functional perspective.

Now, let's finish up with some good old CSS.

We won't go into the details of the CSS code below; it's basic enough that you'll be able to understand each and every bit of it as you read through it:

body {
   background-color: lightgrey;
   margin: 50px;
}

body, button {
   font-family: sans-serif;
}

.tablist main {
   background-color: white;
   padding: 30px;
   min-height: 300px;
   box-sizing: border-box;
}

.tablist_label {
   display: inline-block;
   border: none;
   padding: 15px 20px;
   cursor: pointer;
}

.tablist_label:hover,
.tablist_label--sel {
   background-color: blueviolet;
   color: white
}

Alright, let's now test our program:

Live Example

Absolutely perfect!