Loading a ,js Script in React, issues on Pagination/NavBar Links

Question

I understand I have an issue similar to here, Though It looks to me that this is what I am already doing.

I have a function which ads the script to the page as per below.

export const appendScript = function (scriptToAppend, sourceScript = true) {
 if (sourceScript) {
    const script = document.createElement("script");
    script.type = "text/javascript";
    script.async = false;
    script.src = scriptToAppend;
    document.body.appendChild(script);
  } else {
    const script = document.createElement("script");
    script.type = "text/javascript";
    script.async = false;
    script.innerHTML = scriptToAppend;
    document.body.appendChild(script);
  }
};

export const removeScript = (scriptToremove) => {
  let allsuspects = document.getElementsByTagName("script");
  for (let i = allsuspects.length; i >= 0; i--) {
    if (
      allsuspects[i] &&
      allsuspects[i].getAttribute("src") !== null &&
      allsuspects[i].getAttribute("src").indexOf(`${scriptToremove}`) !== -1
    ) {
      allsuspects[i].parentNode.removeChild(allsuspects[i]);
    }
  }
};

I add the scripts to the HTML as:

  componentDidMount() {
    //Jquery Plugin from the asset site. These are used always.
    appendScript("assets/js/jquery-2.2.1.min.js");
    appendScript("assets/js/jquery-migrate-1.2.1.min.js");
    appendScript("assets/bootstrap/js/bootstrap.min.js");

  }

Though one of the scripts is not loading properly when navigating through the navigation (via <Link></Link> component.

Though once I refresh the page, the script is working and I can see the script being used, e.g. pictures are showing up, owl carousel, and other visible effects.

The pagination, I never get the script to work on the next page, mainly the img are not showing up.

  {pages.map((page) => (
    <li key={page} className={page === currentPage ? "active" : "null"}>
      <Link to="#" onClick={() => onPageChange(page)}>
        {" "}
        {page}
      </Link>
    </li>
  ))}

Maybe this is as well something in the way how I am retrieving img elements in React:

<div className="image bg-transfer">
              <img src={tag.imagePath} alt="Sorry Can't Find :(" />
            </div>

Is this approach correct in order to have the scripts loaded for the react? I can't have the scripts changed much, moving from a static HTML draft to React.js. I hope there is a simple answer to this...

In which ComponentDidMount do you import it? At the root (App) level? or in the route level? — Tasos
– Tasos, Commented Oct 1, 2020 at 10:43
Importing it on the component level, E.g. NavBar, which is not changing for no, but will have user information later on. And function App() { return ( <React.Fragment> <Header /> <div id="page-content"> <Switch> </Switch> </div> <Footer /> </React.Fragment> ); } — Raitis Lebedevs
– Raitis Lebedevs, Commented Oct 1, 2020 at 10:49
You need to lift it up to the top component 'App' in order to work for every route — Tasos
– Tasos, Commented Oct 1, 2020 at 10:59
Lift up the imported .js file? New to React, hence not sure if understand this term. As I understand I am not moving the State up, I only need the script to be used in several scripts, but it is not being 're-run' on links. I might not follow how the lifting up logic works though. — Raitis Lebedevs
– Raitis Lebedevs, Commented Oct 1, 2020 at 11:02
Understood how to achieve what I want, though not ideal, will work for me now. Once i will finish all, will focus on re-writing code better! See it in the solution bar :) — Raitis Lebedevs
– Raitis Lebedevs, Commented Oct 1, 2020 at 13:28

Raitis Lebedevs · Accepted Answer · 2020-10-01 13:31:33Z

1

Thanks to the enthusiast @Tasos Bu, I understood what I was missing, and he lead me to the idea to add the script which I need as per below. This solved all of my problems (not all, still not a millionaire). Here is how I did it. I am adding and removing the scripts which still use JQuery to the HTML after it is rendered.

  componentDidMount() {
    //All custom Js functions, responsivness etc.
    appendScript("assets/js/custom.js");
  }
  componentDidUpdate() {
    //All custom Js functions, responsivness etc.
    removeScript("assets/js/custom.js");
    appendScript("assets/js/custom.js");
  }

answered Oct 1, 2020 at 13:31

Raitis Lebedevs

1152 silver badges13 bronze badges

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

1 Comment

Tasos Over a year ago

No problem Raitis, happy coding :D

Collectives™ on Stack Overflow

Loading a ,js Script in React, issues on Pagination/NavBar Links

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related