How to make external javascript file work in ReactJs?

Question

In a React project, my public.html file looks like this:

<head>
    <link rel="stylesheet" href="some_stylesheet_file.css">
</head>
<body>
    <div id="root"></div>

    <script src="function.js"></script>
</body>

All the components of the project load inside the "root" div. The "function.js" file is an external javascript file from a theme.

In one of the React components, I have an input field:

<input type="text" name="userName" id="userName" />

Now, inside "componentDidMount()" of that component, if I write

console.log(document.getElementByID("userName"))

it shows the "userName" field correctly in the console. But if I do the same thing in the "function.js" file, the output is null, which indicates the external javascript file is not working properly. I am not sure how to make the external javascript file work so that I can use the properties of the theme. Can anyone help?

mesibo · Accepted Answer · 2021-03-27 03:02:49Z

1

We use the DOM method to load external JS in our ReactJS app.

For example, https://api.mesibo.com/mesibo.js is an external JS library provided by mesibo, we load it as following

const externalJS = "https://api.mesibo.com/mesibo.js";
const script = document.createElement("script");
script.src = externalJS;
document.body.appendChild(script);

answered Mar 27, 2021 at 3:02

mesibo

4,3736 gold badges29 silver badges47 bronze badges

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

6 Comments

John Wink Over a year ago

Where to add this portion? Should I add this inside the React component?

mesibo Over a year ago

We put it in index.html so that is available to all the components.

John Wink Over a year ago

index.html is an html file. How can we write javascript there? Would you please explain exactly where should I add this portion and how I can integrate it to the index.html file?

mesibo Over a year ago

use <script></script> tags in <head>

Badal Saibo Over a year ago

@JohnWink You could add inside useEffect for the component which needs it.

|

Collectives™ on Stack Overflow

How to make external javascript file work in ReactJs?

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related