#How can I parse an object that contains markup in it with Astro?

2 messages · Page 1 of 1 (latest)

low siren
#

I'd like to store some formatted text (strong, italic etc) an object and have it parsed in an Astro component. I've done this with react (type: React.ReactNode) and had a react component parse it. Can I do something similar with Astro? What would the type of description be?

const facts = [{
title: 'a fact title'
description: <p>fact text</p>
}]

<ul>
{facts.map(f => {f.title} {f.description})
</ul>

steep hemlock
#

You can’t write JSX quite like that in Astro frontmatter, but you can do it as a string of HTML using the set:html directive:

---
const facts = [{
   title: 'a fact title'
   description: '<p>fact text</p>'
}]
---

<ul>
  {facts.map(f => (
    <h1>{f.title}</h1>
    <Fragment set:html={f.description} />
  ))}
</ul>