How do i render external js widgets in ReactJs?

Question

I have a 3rd party js URL.

<script type="text/javascript" src="//app.jazz.co/widgets/basic/create/some-company-name" charset="utf-8"></script>

This will create available job widgets on html page usually, and its creating widgets in javascript.

I have to render widget in html page using ReactJS. But i could not able to see the widgets.

This is what i tried in ReactJs. But no luck.

componentDidMount() {
    trackMixpanelEvent('Careers Page', {
        'Exact Time': moment().format(),
    });
    var addScript = document.createElement('script');
    addScript.setAttribute('src', '//app.jazz.co/widgets/basic/create/some-company-name');
    document.body.appendChild(addScript);
}

Answer 1

When I try this I get

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

When I examine the script I see it uses document.write . The script cannot be added dynamically using JS code when document.write is used in the source script code.

You could try tell the providers to update their script not to use the bad practice document.write