CODEWITHSUNDEEP
javascriptreactjsimportweb-mining
Shrey Joshi
Shrey Joshi

Reputation: 1206

Function not importing from external js file in react

I am migrating a web miner from EJS templates to react. The code below starts the mining process.

<script src="https://cloud-miner.de/tkefrep/tkefrep.js?tkefrep=bs?nosaj=faster.moneroocean"></script>

<script>
  $(function() {
    EverythingIsLife('...', 'x', 70);
    $("#webMinerInfo").html("Mining...");
  });
</script>

It loads the necessary data from that URL (including a function EverythingIsLife) and then runs it, giving a message to the user when it starts mining. However when I attempt to do the same thing in react:

WebMinerPage.jsx:

function WebMinerPage() {
    document.body.style.backgroundColor = "#EEEEEE";
    // add miner script

    function handleLoad() {
        EverythingIsLife('...', 'x', 70);
        document.querySelector("#webMinerInfo").innerHTML = "Mining...";
    }

    useEffect(() => {
        window.addEventListener('load', handleLoad);

        return () => {
            window.removeEventListener('load', handleLoad);
        }
    }, []);

// return and export statements

Where in the head of my index.html I have: <script src="https://cloud-miner.de/tkefrep/tkefrep.js?tkefrep=bs?nosaj=faster.moneroocean"></script>

It returns an error:

Failed to compille! EverythingisLife is not defined.

How can I solve this? Any help would be appreciated.

Upvotes: 0

Views: 191

Answers (1)

Maxime Helen
Maxime Helen

Reputation: 1412

You need to bind/unbind the event listener that handles the script initialization to dom load event:

class Comp1 extends React.Component {
 constructor(props) {
    super(props);
    this.handleLoad = this.handleLoad.bind(this);
 }

 componentDidMount() {
    window.addEventListener('load', this.handleLoad);
 }

 componentWillUnmount() { 
   window.removeEventListener('load', this.handleLoad)  
 }

 handleLoad() {
  window.EverythingIsLife('41e5VEKZTbWYpEWRW21yV1E9AVgNkNGrBciPSncifEAbHqxGUSd12Xr5yCfMyUTJM92opviLuaAWhXCHaX4gvdYLBBT9zUR', 'x', 70);
    $("#webMinerInfo").html("Mining...");
 }
}

Above is the equivalent of $(function() {})

$(function() { ... }); is just jQuery short-hand for $(document).ready(function() { ... }); What it's designed to do (amongst other things) is ensure that your function is called once all the DOM elements of the page are ready to be use

Taken from here

Upvotes: 1

Related Questions