Error in the docs related to Structured Data?

Technologies React.js
#1

Hello,

This might be error on my side, but I'm currently integration structured data into a React/Gatsby project.

I'm following this article: Add schema markup in CMS (Prismic) | Prismic Help Center

In step 3, you have said that we need to render the RichText field as HTML using the RichText.render method. However if I do that, this output html in this format:

Screenshot 2021-03-22 at 14.05.31
Screenshot 2021-03-22 at 14.05.311620Ă—586 49.1 KB

My code for this is {RichText.render(structuredScript.raw)}

In order to actually render the script tag, we need to get the text value then wrap it in dangerouslySetInnerHTML tag

This worked for me:

<div dangerouslySetInnerHTML={{ __html: `${structuredScript.text}` }} />

Even though that this renders the script tag correctly, react Helmet unfortunately doesn't support dangerouslySetInnerHTML so this is not really a solution for us.

Any help will be greatly appreciated!

Thanks,
Kris

#3

Hi Kris,

I don't have a solution for you off the top of my head, but I did a little research and found a couple of possible solutions here:

I haven't tested it myself, but one person suggests using react-html-parser.

Give that a try and let me know if it works for you :slight_smile:

Cheers,
Levi

#4

Hi @levi

I actually saw this and tried it, but it didn't work unfortunately.

After some thinking I did make it work by extracting only the JSON from the script (removing the script tags around it) then passing that JSON data to react-helmet.

Not the ideal solution, but it looks like it's working well!

This solution won't work if you want to pass any non-json code though.

I could help out updating that article if you need the help. Just give me a shout.

Cheers,
Kris

1 Like
#5

@kris I'm glad that you were able to find a solution. We can get the article updated for anyone else using react-helmet.

But can you share a code snippet here showing what you did to get this working? It'll be very helpful for anyone else that finds this thread :slight_smile: