Render Your Templates

Now we've done most of the plumbing, the last step is to have the app/awesome-content.tsx component render out the blocks to our view.

Remember... the power of blocks is how it enables non-developers to dictate the order in which the content is displayed on the page, so we can't just hard-code things any more.

Checking the Data we get Back

Navigate to app/awesome-content.tsx and make the following changes:

Instead of pulling out specific values, we are now pulling out the array of blocks. To see what we're dealing with, we've added a console.log line into the component so we can examine the shape of the data.

To update our template, we want to:

• Iterate over the blocks
• Examine what type of block we are looking at
• Render the appropriate HTML for that particular block

There are a few ways we can do this, but for now we'll go with the quick-n-dirty solution.

Showing our Data

Change app/awesome-content.tsx to the following:

The order of the blocks array is preserved by TinaCMS, so it respects the order that our users selected when they were building out the content via the Visual Editor, so a simple map + switch statement is all that's needed to render the appropriate HTML snippet.

Try using the Visual Editor to re-order your templates, or even add more! You can have as many instances of each template as you like!