Exact same code from dangerouslySetInnerHTML not working only inside Gatsby / ReactJS page

Question

I am trying to create a page on a Gatsbyjs site using React.

the page code is

import React from 'react'
import Link from 'gatsby-link'

let test2 = `
<script type='text/javascript'>
(function(d, s) {
    var useSSL = 'https:' == document.location.protocol;
    var js, where = d.getElementsByTagName(s)[0],
    js = d.createElement(s);
    js.src = (useSSL ? 'https:' : 'http:') +  '//www.peopleperhour.com/hire/1002307300/1213788.js?width=300&height=135&orientation=vertical&theme=light&rnd='+parseInt(Math.random()*10000, 10);\
    try { where.parentNode.insertBefore(js, where); } catch (e) { if (typeof console !== 'undefined' && console.log && e.stack) { console.log(e.stack); } }\
}(document, 'script'));
</script><div id='pph-hireme'></div>
`

const ContactPage = () => (

    <div>
        <h1>ContactPage</h1>

        <h2>Direct Contact</h2>
        <p>For anything you need or want to ask send me a message at <strong><a href='mailto:giannisdallas81@gmail.com'>
            giannisdallas81@gmail.com
        </a></strong>
        </p>
        <h2>Hire me online</h2>
        <p><a href="https://www.upwork.com/o/profiles/users/_~0168d059ac7bbd584a/">Find me on Upwork</a></p>
        <p>{test2}</p>
        <p
            dangerouslySetInnerHTML={{ __html: test2 }}
          />
        <Link to="/">Back to my homepage</Link>

    </div>

)

export default ContactPage

I am using dangerouslySetInnerHTML to display a People per hour script but the script stays inactive/hidden inside the page. See the end result here The odd thing is that when I copy the produced HTML to a snippet here or on Codepen the exact same HTML works as you can see next.

<div><h1>ContactPage</h1><h2>Direct Contact</h2><p><!-- react-text: 19 -->For anything you need or want to ask send me a message at <!-- /react-text --><strong><a href="mailto:giannisdallas81@gmail.com">giannisdallas81@gmail.com</a></strong></p><h2>Hire me online</h2><p><a href="https://www.upwork.com/o/profiles/users/_~0168d059ac7bbd584a/">Find me on Upwork</a></p><p>
&lt;script type='text/javascript'&gt;
(function(d, s) {
    var useSSL = 'https:' == document.location.protocol;
    var js, where = d.getElementsByTagName(s)[0],
    js = d.createElement(s);
    js.src = (useSSL ? 'https:' : 'http:') +  '//www.peopleperhour.com/hire/1002307300/1213788.js?width=300&amp;height=135&amp;orientation=vertical&amp;theme=light&amp;rnd='+parseInt(Math.random()*10000, 10);    try { where.parentNode.insertBefore(js, where); } catch (e) { if (typeof console !== 'undefined' &amp;&amp; console.log &amp;&amp; e.stack) { console.log(e.stack); } }}(document, 'script'));
&lt;/script&gt;&lt;div id='pph-hireme'&gt;&lt;/div&gt;
</p><p>
<script type="text/javascript">
(function(d, s) {
    var useSSL = 'https:' == document.location.protocol;
    var js, where = d.getElementsByTagName(s)[0],
    js = d.createElement(s);
    js.src = (useSSL ? 'https:' : 'http:') +  '//www.peopleperhour.com/hire/1002307300/1213788.js?width=300&height=135&orientation=vertical&theme=light&rnd='+parseInt(Math.random()*10000, 10);    try { where.parentNode.insertBefore(js, where); } catch (e) { if (typeof console !== 'undefined' && console.log && e.stack) { console.log(e.stack); } }}(document, 'script'));
</script><div id="pph-hireme"></div>
</p><a href="/">Back to my homepage</a></div>

Can you please let me know if I am doing something wrong? Can you explain the difference between the 2 codes? Do I need to include the embed code in a different way?

score 1 · Answer 1 · answered Mar 05 '18 at 12:35

In React, initialization code that require DOM Nodes should be set in componentDidMount() (source).

I'm not 100% sure why your code isn't working, but I guess it has something related with DOM diffing.

I made it works by using class Components as follow:

import React, { Component } from 'react';
import Link from 'gatsby-link';

class ContactPage extends Component {
  loadHireMe(d, s) {
    var useSSL = 'https:' == document.location.protocol;
    var js,
      where = d.getElementsByTagName(s)[0],
      js = d.createElement(s);
    js.src =
      (useSSL ? 'https:' : 'http:') +
      '//www.peopleperhour.com/hire/1002307300/1213788.js?width=300&height=135&orientation=vertical&theme=light&rnd=' +
      parseInt(Math.random() * 10000, 10);
    try {
      where.parentNode.insertBefore(js, where);
    } catch (e) {
      if (typeof console !== 'undefined' && console.log && e.stack) {
        console.log(e.stack);
      }
    }
  }

  componentDidMount() {
    this.loadHireMe(document, 'script');
  }

  render() {
    return (
      <div>
        <h1>ContactPage</h1>

        <h2>Direct Contact</h2>
        <p>
          For anything you need or want to ask send me a message at{' '}
          <strong>
            <a href="mailto:giannisdallas81@gmail.com">
              giannisdallas81@gmail.com
            </a>
          </strong>
        </p>
        <h2>Hire me online</h2>
        <p>
          <a 
href="https://www.upwork.com/o/profiles/users/_~0168d059ac7bbd584a/">
            Find me on Upwork
          </a>
        </p>
        <div id="pph-hireme" />
        <Link to="/">Back to my homepage</Link>
      </div>
    );
  }
}

export default ContactPage;

Edit:

A similar question already exist here

Exact same code from dangerouslySetInnerHTML not working only inside Gatsby / ReactJS page

1 Answers1

Edit: