title: Changing scope of promise returned in a conditional import to a different variable in React
body: <p>So I have a file named hi.js which has content like this</p>
  <pre><code>export var printHi = [{
          &quot;name&quot;:&quot;Anki&quot;,
          &quot;hobby&quot;:&quot;cycling&quot;
      },
      {
          &quot;name&quot;:&quot;Pinki&quot;,
          &quot;hobby&quot;:&quot;Swimming&quot;
      }
  ];
  </code></pre>
  <p>My main code is like this</p>
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import App from './App';
  
  ReactDOM.render(
    &lt;React.StrictMode&gt;
      &lt;App /&gt;
    &lt;/React.StrictMode&gt;,
    document.getElementById('root')
  );
  </code></pre>
  <p>And my app.js looks something like this</p>
  <pre><code>function App() {
    let dat = [];
    let name = &quot;anki&quot;;
    if(name===&quot;anki&quot;){
      import('./hi.js').then(function(data){
      dat = data.printHi;
       console.log(dat); // Output returned
      })
      console.log(dat); // Empty array
    }
   console.log(dat); // Empty array and here I want the data in this variable 
    return (
      &lt;div className=&quot;App&quot;&gt;
       &lt;h1&gt;HI&lt;/h1&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>As mentioned in the comment I am only getting the data inside .then . I am not getting data even inside if block and not inside function as well. I even tried with</p>
  <pre><code>var dat;
  </code></pre>
  <p>I don't know how to use the value in function because the whole function is where I have to use the value. I do not want to use DB because these values will remain static. I want some way to change the scope of the value returned by .then.
  The response I am getting on console is shown below
  <a href="https://i.stack.imgur.com/qL5t8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qL5t8.png" alt="Console output" /></a></p>