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?
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.