#Astro props entity encoding

3 messages · Page 1 of 1 (latest)

surreal moat Feb 6, 2024, 12:03 PM

I have a simple component that I pass a parameter into.

<MyComp title="This is a<br />long title"/>

`---
const { title } = Astro.props;

<h1>{ title }</h1>`

The result I end up with is <h1>This is a <br />long title</h1>, i.e. the <br /> is converted to HTML entities. Why is this and how can I avoid it?

proven widget Feb 6, 2024, 2:08 PM

Hey Jan 👋 that's the way HTML elements are parsed
You can use <h1 set:html={title } /> for a quick fix houston_wink

More Info can be found at https://docs.astro.build/en/reference/directives-reference/#sethtml

#Astro props entity encoding

`--- const { title } = Astro.props;

`---
const { title } = Astro.props;