title: Globally imported variables are undefined
body: <p>I have three variables in my <strong>FinalVariables.js</strong> as follows : </p>
  
  <pre><code>var finalTaskName = 'abc'
  var finalQuantityTaskExecuted = 0
  var finalQuantityTaskCompletion = 100
  
  export {finalTaskName, finalQuantityTaskExecuted, finalQuantityTaskCompletion}
  </code></pre>
  
  <p>In another file, I am importing them using the following line:</p>
  
  <pre><code>import {finalTaskName,finalQuantityTaskExecuted,finalQuantityTaskCompletion} from './FinalVariables'
  </code></pre>
  
  <p>However when I try to use any of the above three variables in the other file, they're always <code>undefined</code>. 
  Is there a reason for this? </p>
  
  <p>I am new to Javascript and React and any help would be appreciated! Thank you!</p>
  
  <p>-------------------------------------------------------------------------------------------Updated-------------------------------------------------------------</p>
  
  <p>I imported the variables as follows : </p>
  
  <pre><code>import * as finalVariables from './FinalVariables' 
  </code></pre>
  
  <p>When I do a 
  <code>console.log(finalVariables.finalTaskName)</code></p>
  
  <p>I'm able to print the correct value, but when I try to assign a value to it : </p>
  
  <pre><code>finalVariables.finalTaskName = this.props.item[0].particulars 
  
  </code></pre>
  
  <p>I'm getting the following error : </p>
  
  <blockquote>
    <p>Cannot set property finalTaskName of # which has only a getter</p>
  </blockquote>
  
  <p>============================= Updated ======================================</p>
  
  <p>I am able to update the values correctly now but in the main class TasksInsert.jsx where I am importing these values, I have this in the render function, </p>
  
  <pre><code>&lt;p&gt;{finalVariables.finalTaskName}&lt;/p&gt; 
  &lt;p&gt;{finalVariables.finalQuantityTaskExecuted}&lt;/p&gt; 
  &lt;p&gt;{finalVariables.finalQuantityTaskCompletion}&lt;/p&gt; 
  
  </code></pre>
  
  <p>Why are these values not reflecting according to the recent changes? My state constructor looks like this : </p>
  
  <pre><code>this.setState({ finalVariables })
  
  </code></pre>
  
  <p>--------------------------------------------------------------------- Updated --------------------------------------</p>
  
  <p>I followed a similar approach for a global array called BOQSuggestions, to which I was pushing data and it worked, that is changes to it were reflected globally. </p>
  
  <p>Plus, this is the only place I will be needing shared data, which is why I don't want to use Redux. </p>
  
  <p>Could anyone please suggest code to fix this issue? I am still stuck here and am new to Javascript.</p>