Stupid Gatsby! 🤦‍♀️

Published on Wed Sep 02 2020

I just made some changes to the website that included moving things around in the Gatsby code – well actually the React code rendering the blog posts.

On the front page of the blog – where the posts are listed – an excerpt of each post is shown. Because the excerpt contains HTML it has to go into an element as a property like this:

dangerouslySetInnerHTML={{__html: post.excerpt}}

This has worked perfectly in the past and it seemed to be working as inteded when the site was running on localhost – but when the site came live the excerpt showed for a second and then disappeared again shortly after.

It turned out that after changing the backend for the blog the excerpt was now encapsuled in <p></p> tags. It turns out that the original code was actually on a <p>-tag like this:

<p dangerouslySetInnerHTML={{__html: post.excerpt}}></p>

and that doesn’t work properly – it figures right?! I <p> in a <p>?! How would that even work?!

The solution was quite simple, put the property on a <div> instead, like this:

<div dangerouslySetInnerHTML={{__html: post.excerpt}}></div>