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.