Now we've done most of the plumbing, the last step is to have our 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.

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

  const awesomeTitle = pageData.data.my_first_collection.title;
  const incredibleBody = pageData.data.my_first_collection.body;
  const beautifulImage = pageData.data.my_first_collection.beautifulImage;
  const blocks = pageData.data.my_first_collection.blocks;
  console.log(blocks); // TODO: Remove later 🙃

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.

2. Change your awesome-content.tsx to the following:

  //const awesomeTitle = pageData.data.my_first_collection.title;
  //const incredibleBody = pageData.data.my_first_collection.body;
  //const beautifulImage = pageData.data.my_first_collection.beautifulImage;
  const blocks = pageData.data.my_first_collection.blocks;
  console.log(blocks);

  return (
    <>
    {blocks?.map((block, index) => {
      switch (block.__typename) {
        case "My_first_collectionBlocksTitleBlock":
          return <h1 key={index}>{block.title}</h1>;
        case "My_first_collectionBlocksBodyBlock":
          return <TinaMarkdown key={index} content={block.body} />;
        case "My_first_collectionBlocksImageBlock":
          return <img key={index} src={block.image} />;
      }
    })}
    </>
  );

The order of the blocks array is preserved by Tina, 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!