Fix Action-Rendering Issues with React Applications

Some Monetate actions, such as Insert HTML actions, may not always perform as expected in a single-page React application. React may produce warnings and revert content, depending on the application and the use of these actions.

For this example, your site has a single-page React application on which you want to insert HTML to override the product description on a product page.

There are a few ways to get around the issues that React may cause.

Using CSS Actions to Hide/Show Content

You can use an action that inserts CSS.

  1. Render a content block (whether it is a <div> or some other HTML element) for each description option.
  2. Create an experience with CSS actions that toggles the visibility of this content.

Using JavaScript Actions to Trigger a Callback Function

You can use an action that inserts JavaScript.

  1. Expose a function that makes the changes you want.
    • The code example uses events.
    • If you have jQuery on your site, then you could also use jQuery triggers in this instance.
  2. Create an experience with JavaScript actions that trigger the defined event(s).

Insert JavaScript Action Code Sample

const productDesc = '<p>My product description alternate</p>';

// Using initCustomEvent is deprecated but is the 
// IE compatible way so using for this example.
// Could use JQuery's triggers or similar
const pdpDescEvent = document.createEvent('CustomEvent');
pdpDescEvent.initCustomEvent('pdp-desc', true, true, productDesc);

Event Listener on Your Site Code Sample

document.addEventListener('pdp-desc', e => {
   // e.detail is your new content
   // do whatever you need to with this
   // eventually render using dangerouslySetInnerHTML attribute
}, false);