How to display external <script> using div in Reactjs?

Question

I am trying to learn how to display small widgets (for example plane tickets brower) onto my website built in Reactjs. The code that's supposed to work instantly according to the provider is as below ("just copy and paste into website"):

<div id="widget" data-widget="search" data-affiliate="873" data-campaign="873-"></div>
<script src="https://widget.wakacje.pl/v2/public/js/widgets/search-widget.js?c=widget" async></script>

I tried to Google for answers and my idea atm looks like this:

function OfferBrowser() {

    const script = document.createElement("script");
    script.src = "https://widget.wakacje.pl/v2/public/js/widgets/search-widget.js?c=widget";
    script.async = true;


    return(
        <div id="widget" data-widget="search" data-affiliate="873" data-campaign="873-"></div>
    )
}

The other this I tried was also to put {script} into the tag like this, but it doesn't work as well.

<div id="widget" data-widget="search" data-affiliate="873" data-campaign="873-">{script}</div>

How should I approach this?

Hello there! What is wrong with the second chunk of code? Are you getting any errors? If so could you include them in the question please? — The Otterlord
– The Otterlord, Commented Sep 9, 2021 at 13:07
@TheOtterlord sorry, I forget to mention - second chunk displays literally nothing. I think there is no connection between these <script> and <div> tags and I don't know how to make one. — Burak
– Burak, Commented Sep 9, 2021 at 13:11

The Otterlord · Accepted Answer · 2021-09-09 13:21:28Z

2

While I don't know React, I believe I have found the problem with the second chunk of code. You have created a script element, but have not added it to the DOM, and therefore it's not loading the script.

After looking around for a bot, I believe I've found a fix.

const script = document.createElement("script");
script.src = "https://widget.wakacje.pl/v2/public/js/widgets/search-widget.js?c=widget";
script.async = true;
// append the script tag to the body
document.body.appendChild(script);

I think this needs to run after the component is mounted, so that the div is in the DOM.

answered Sep 9, 2021 at 13:21

The Otterlord

2,23514 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to display external <script> using div in Reactjs?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related