Storing Gatsby page content - reactjs

Question

I'm exploring Gatsby to make a static website with multiple pages. Those pages will have the same template, just the text will change. To make it easier, I'm going to create a single template. I want to store the content of the different pages (text, path etc.)in Yaml or JSON file. So basically it would look like this :
import React from "react";
import content from '../content/pageContent.yaml'
const Template = () => {
return (
<header className="div1">
<div className="flex items-center justify-center container mx-auto">
<div className="basis-1/2 el tagline">
<h1>{content.title}</h1>
<p>{content.description}</p>
<button>Lets go</button>
</div>
<div className="basis-1/2 el">
<img src=`../images/${pic}`
</div>
</div>
</header>
...
)
}
export template
Here is my pageContent.yaml
title: YAML content used at build time with Gatsby
description: my description with a <b>bold word</b>
pic: mypicture.png
Everything works great but the problem is that it doesn't render the HTML tags. But if I use <h1 dangerouslySetInnerHTML={ {__html: content.titre} }></h1> instead of <h1>{content.title}</h1> it renders the HTML tag.
My question is : is it ok to make it this way? Would it be a better way to do that ?
Thanks a lot

Answer 1

dangerouslySetInnerHTML exposes your app to security risks such as Cross-site scripting XSS attacks.
You could use a library like react-markdown to convert the markdown to html.
Here is an example of how you could do it, adapt as appropriate.
import React from "react";
import content from '../content/pageContent.yaml'
import ReactMarkdown from "react-markdown";
const Template = () => {
return (
<header className="div1">
<div className="flex items-center justify-center container mx-auto">
<div className="basis-1/2 el tagline">
<ReactMarkdown source={content.title} />
<ReactMarkdown source={content.description} />
<button>Lets go</button>
</div>
<div className="basis-1/2 el">
<img src=`../images/${pic}`
</div>
</div>
</header>
...
)
}
export template