In this lecture, we're going to render the list of clips.
The data is readily available in our components.
The next step is to loop through the clips array in the template, open the Manage template file in
your editor.
In this template, we can find the list of videos by searching for a comment that says video list.
The first div tag will be a container for the list.
It has the grid class applied to it.
Inside this div tag are six additional div tags.
Each tag represents a single video in the dummy list.
You can minimize these sections to get a structural overview of the document.
We're going to remove the last five div tags from the list.
They're dummy elements.
We only need to loop through one of these tags to achieve the desired effect on the div tag.
Applying the end for directive.
The expression will be the following.
Let's clip of clips.
The alias for a single clip will be called Clip.
We won't be able to identify the clips without modifying the static parts of our template.
The two elements that'll be dynamic are the image and title.
We don't have a screenshot of our images.
Therefore, we'll focus on the title search for a comment that says Link.
Under this comment is an anchor element, the first anchor element will contain the title.
Let's replace the static text with an expression.
The expression will output the clip Typekit title property.
Let's give our app a test.
Open the Manage page in your browser.
The dummy items have been replaced with a list of clips uploaded by the user.
You should be able to see a unique title for each of them unless you give them all the same title.
Great.
In the next lecture, we're going to begin adding a form to modify a clip.