React: adding embed script that has dynamic parameter

  javascript, jsx, react-helmet, reactjs

I have a component which need to contain a form from Marketo.

In the backend, I have an ACF field called form_id. Idea being is that the user can input the Marketo form ID in the backend, and I will pass the value from that field into the <script> snippet in the component and it will find the relevant form.

Currently, I am trying to use react-helmet, however, it errors (TypeError: tag[primaryAttributeKey].toLowerCase is not a function) because of the field value from the backend.

Here is how the embed code appears from Marketo (with form ID 9999 used as an example):

<script src="//url.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_9999"></form>
<script>MktoForms2.loadForm("//url.com", "999-XXX-999", 9999);</script>

And here is my current approach trying to get the value from backend to appear in place of 9999:

import React from "react";
import { useStaticQuery, graphql } from "gatsby";
import parse from "html-react-parser";
import {Helmet} from "react-helmet";

const ContactHero = (props) => {
  return {
  
  <div className="contactHero__form">
    <Helmet>
      <script src="//url.com/js/forms2/js/forms2.min.js"></script>
      <form id={`mktoForm_${parse(form_id)}`}></form>
      <script>MktoForms2.loadForm("url.com", "999-XXX-999", {parse(form_id)})</script>
    </Helmet>
  </div>
  
  };
};

Source: Ask Javascript Questions

LEAVE A COMMENT