title: Having A Problem In Importing External Js In App.js React Developmnt
body: <p>I Am Trying To Build An Starter App Which Handles SMTP Anonymously In React Development As A Part Of Learning</p>
  <p>But Before Getting Into Actual Development , I am Not Looking For Fancy Front-end Here
  So I Just Write Basic Showcase Script To verify the code Works Well</p>
  <p>Hear My App.js looks Likes
  It Is A Simple Script Which Basically Generates Random Keyword Email And Lets You Copy The Mail Address So Every-time i Refresh Page It Gets me A New Mail</p>
  <pre><code>import logo from './logo.svg';
  import './App.css';
  
  const characters ='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  
  function generateString(length) 
  {
      let result = ' ';
      let addr = &quot;@example.com&quot;;
      const charactersLength = characters.length;
      for ( let i = 0; i &lt; length; i++ ) {
          result += characters.charAt(Math.floor(Math.random() * charactersLength));
      }
      result=result+addr;
  
      return result;
  }
  
  var mail=generateString(9)
  
  
  function CopyIt() {
    
    var copyText = document.getElementById(&quot;evar&quot;);
  
    /* Select the text field */
    copyText.select();
    copyText.setSelectionRange(0, 99999);
  
    /* Copy the text inside the text field */
    document.execCommand(&quot;copy&quot;);
  
    /* Alert the copied text */
    alert(&quot;Copied the text: &quot; + copyText.value);
  }
  
  
  function App() {
    return (
     &lt;&gt; 
     &lt;pre&gt;
     &lt;h1&gt;This is Temporarily mail site &lt;/h1&gt;
     &lt;p&gt;It helps you Access your Anonymous mail without logins Required &lt;/p&gt;
     &lt;/pre&gt;
     &lt;nav className=&quot;navbar navbar-light bg-light&quot;&gt;
        &lt;form className=&quot;container-fluid&quot;&gt;
          &lt;div class=&quot;input-group&quot;&gt;
          &lt;span class=&quot;input-group-text&quot; id=&quot;basic-addon1&quot;&gt;@&lt;/span&gt;
          &lt;input type=&quot;text&quot; id=&quot;evar&quot; class=&quot;form-control&quot; value={mail} aria-label=&quot;Username&quot; aria-describedby=&quot;basic-addon1&quot;&gt;&lt;/input&gt;
          &lt;button onClick='Copyit()'&gt;Copy text&lt;/button&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/nav&gt;
  
     &lt;/&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>But Every-time I Refresh Main App.js I Got Copied Mail of Previously Generated Code
  So What I Did Is
  Put A New Js File Name logic.js And Put My Both Function genrateStrings And CopyIt
  And Imported In App.js</p>
  <p>As <code>import './logic.js'</code>
  In The App.js With Same Src Folder</p>
  <p>Now my logic.js Looks like</p>
  <pre><code>const characters ='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  
  function generateString(length) 
  {
      let result = ' ';
      let addr = &quot;@example.com&quot;;
      const charactersLength = characters.length;
      for ( let i = 0; i &lt; length; i++ ) {
          result += characters.charAt(Math.floor(Math.random() * charactersLength));
      }
      result=result+addr;
  
      return result;
  }
  
  
  function CopyIt() {
    
    var copyText = document.getElementById(&quot;evar&quot;);
  
    /* Select the text field */
    copyText.select();
    copyText.setSelectionRange(0, 99999);
  
    /* Copy the text inside the text field */
    document.execCommand(&quot;copy&quot;);
  
    /* Alert the copied text */
    alert(&quot;Copied the text: &quot; + copyText.value);
  }
  
  
  </code></pre>
  <p>Now When i Try To Run Code I Am Getting Error Like
  genrateStrings() And CopyIt() Not Found</p>
  <p>I Tried To Update import './logic.js' In public/index.html and src/index.js As well</p>
  <p>I Tried Reading This Article On Imporitng Externaljs file <a href="https://betterprogramming.pub/4-ways-of-adding-external-js-files-in-reactjs-823f85de3668" rel="nofollow noreferrer">here</a></p>
  <p>but i couldn't understand cause i am beginer with react</p>
  <p>i also tried using this import method</p>
  <pre><code>const Demo = props =&gt; (
    &lt;ScriptTag type=&quot;text/javascript&quot; src=&quot;logic.js&quot; /&gt;
    )
  
  </code></pre>
  <p>but none of them giving me promising result as mentioned</p>