Implementing a Student Roster

Back in the Roster page, we need to get a reference to the hook we just created in the previous lesson. Follow along in the executable at the end of the lesson. Just inside the Roster functional function, add a line to call it. Remember, useStudents is essentially a passthrough to React’s useState function, but it wraps and hides that mock array. Our Roster page does not care where those students come from, so we will not tell it.

Now that we have some students, let us list them on the screen.

Remove that paragraph tag and add an IonPage tag. Every Ionic React page needs an IonPage tag as its root component. As always, as we enter these next few component tags on the page, you need to make sure they are being imported from @ionic/react.

Next, we will create the page header. Insert an IonHeader Tag, then an IonToolBar tag inside of that, and an IonTitle tag inside of that. Set the IonTitle to Roster.

The IonHeader should be familiar, as we have seen it on the home page, and during the guided tour.

Immediately after the IonHeader, we need an IonContent. Inside the IonContent, I will introduce a new component: The IonList.

The IonList component

An IonList is another container component, designed to wrap multiple types of items in a visually consistent manner. IonLists contain things called IonItems, which in turn wrap IonLabels, IonButtons, IonIcons, form input fields, and so forth. We will use all of those and more during this course.

IonLists can also be used to implement item sliding, which you have probably seen before. These are options that appear only when you swipe a list item left or right, revealing a less often used, or potentially dangerous option, such as delete.

Back in the code, immediately inside the IonList, we can iterate over the students array using the array map function. We need to provide an arrow function to “map” that will describe what we want to do with each student in the array.

Think of it this way: We are displaying a list of unknown length, but each item of the array is displayed using the same template.

Inside the map’s arrow function, we will return some markup. We will start with the IonItemSliding component.

IonItemSliding will provide us with the item swipe, or slide, option. Inside that will be an IonItem tag. This component will encapsulate the entire list item. Inside the IonItem, add an IonIcon and an IonLabel as siblings. Set the icon’s slot attribute to start, meaning that it will appear at the start of the line. Inside the IonLabel, bind some text to the student’s last and first names, separated by a comma.

Next to them, create two more IonIcon tags, which we will conditionally render based on the student’s status of absent or present. The first one is for present; set it to display the eye icon. The second is to be displayed when the student is absent. So for that one, use the eyeOffOutline, which is an outline of an eye with a line through it.

The way we render the icons conditionally is to wrap the entire IonIcon tag in a JavaScript logical expression. We compare the student’s status to the value of present, or absent, followed by the logical AND operator, followed by the IonIcon. The short-circuiting rules of JavaScript will prevent the second half of the expression from being evaluated, if the first half evaluates to false.

Note that it is entirely possible for the student’s status to be set to neither value, because the status field is optional. In that case, neither icon will be rendered, which is what I want.

Here is the completed IonContent code with the list.

Run the code and see how it looks. If all went well, all of our students are displayed as expected.

Customize the sliding options

Let’s wrap this lesson up by finishing that sliding item. Immediately before the IonItemSliding closing tag, add an IonItemOptions slide, with the side attribute set to end. This means we want the option to appear at the end of the item, when it slides toward the beginning of the item.

Inside of that tag, add a single IonItemOption tag (mind the singular/plural here. The plural tag is the outer tag). Set this one’s color to danger which, by default, is a scary looking orange/red color. We will deal with the click handler later, so for now, simply set the tag’s value to the word Delete. The complete code should now look like this.

Run the code. At this point, the only interactivity is the slider itself, so click and drag an item towards the beginning of the item. You should see a Delete button. You can click it. It behaves visually as you would expect it to, but it won’t do anything yet.

In the next chapter, we will wire up some new commands to this page so that we can manage our roster of students.

Quiz