How to output raw text in mjml-react?

Hello,

We are using MGML React to output email templates that will then use handlebars when processing the final email.

For example, we have now handlebars function with named parameter format. When using React, it escapes the quote in the named parameter and breaks handlebars processing.

Neither MjmlText or MjmlRaw work.

<MjmlText>{`{{now format="YYYY"}}`}</MjmlText>
<MjmlRaw>{`{{now format="YYYY"}}`}</MjmlRaw>

outputs

<mj-text>{{now format=&#x27;YYYY&#x27;}}</mj-text>
<mj-raw>{{now format=&#x27;YYYY&#x27;}}</mj-raw>

“dangerouslySetInnerHTML” does not work either.

<MjmlText dangerouslySetInnerHTML={{ __html=`{{now format="YYYY"}}`}}/>
<MjmlText dangerouslySetInnerHTML={{ __html=`{{now format="YYYY"}}`}}/>

outputs

<mj-text dangerously-set-inner-html="[Object]"></mj-text>
<mj-raw dangerously-set-inner-html="[Object]"></mj-raw>

Any idea on how to do this in React or in MJML-React?

[mastertheblaster]

I have added the MjmlHtml component as an extension as it’s not the Mjml* element. The usage looks like:

import { MjmlHtml } from 'mjml-react/extensions';

<MjmlHtml tag="span" html={`{{now format="YYYY"}}`} />

[daliusd]

Hi - bumping this - as I could not find anywhere else that addresses this issue. What can be the solution if I would like to generate the html with handlebars {{#each}}, for example

It is react library - use react for this. Otherwise you have two options:

1. Use mjml directly. Potentially you don’t need mjml-react.
2. Use handlebars to generate js/ts files with mjml-react