Adding search box to React / JSX (using script tag)

Question

How can I add the following HTML to React/JSX in my render function?

<a name="cjsearchboxanchor"></a>
<div class="cjsearchbox">
    <script language="javascript" type="text/javascript" src="http://www.careerjet.de/partners/js_searchbox.html?n=7&nfr=1"></script>
    <div class="cjbotl bloggerDiv"></div>
</div>

What I have tried:

A) Using the following code, then just entering an ordinary (empty) 'script' tag in the JSX:

  componentWillMount() { 
      const script = document.createElement("script")
      script.src = "http://www.careerjet.de/partners/js_jobbox.html   s=java&l=Schweiz&n=5&lid=38241&nfr=1&ntt=1";
      script.language = "javascript";
      script.type= "text/javascript";
      script.async = true;
      document.body.appendChild(script);
  }

- following Adding script tag to React/JSX - Stackoverflow

B) Appending 'embedCode' string containing the entire HTML from above to the JSX using jQuery with the following command: $('.classNameOfMyDiv').append(embedCode); - following Script tag in React - Codepad example

=> The search box does appear, but it is not possible to interact with it. This could be because of the following issue:

"'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened."

C) npm install --save postscribe - following krux/postscribe

D) Adding the HTML above to a span tag with dangerouslySetInnerHTML={{__html: ...}}

Is there an easy way to fix this, or something else one can do to get this search box working with React? Any inputs would be greatly appreciated.

Adding search box to React / JSX (using script tag)

0 Answers0