I have three variables in my FinalVariables.js as follows :

var finalTaskName = 'abc'
var finalQuantityTaskExecuted = 0
var finalQuantityTaskCompletion = 100

export {finalTaskName, finalQuantityTaskExecuted, finalQuantityTaskCompletion}

In another file, I am importing them using the following line:

import {finalTaskName,finalQuantityTaskExecuted,finalQuantityTaskCompletion} from './FinalVariables'

However when I try to use any of the above three variables in the other file, they're always undefined. Is there a reason for this?

I am new to Javascript and React and any help would be appreciated! Thank you!

-------------------------------------------------------------------------------------------Updated-------------------------------------------------------------

I imported the variables as follows :

import * as finalVariables from './FinalVariables' 

When I do a console.log(finalVariables.finalTaskName)

I'm able to print the correct value, but when I try to assign a value to it :

finalVariables.finalTaskName = this.props.item[0].particulars 

I'm getting the following error :

Cannot set property finalTaskName of # which has only a getter

============================= Updated ======================================

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>{finalVariables.finalTaskName}</p> 
<p>{finalVariables.finalQuantityTaskExecuted}</p> 
<p>{finalVariables.finalQuantityTaskCompletion}</p> 

Why are these values not reflecting according to the recent changes? My state constructor looks like this :

this.setState({ finalVariables })

--------------------------------------------------------------------- Updated --------------------------------------

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.

Plus, this is the only place I will be needing shared data, which is why I don't want to use Redux.

Could anyone please suggest code to fix this issue? I am still stuck here and am new to Javascript.

I have three variables in my FinalVariables.js as follows :

var finalTaskName = 'abc'
var finalQuantityTaskExecuted = 0
var finalQuantityTaskCompletion = 100

export {finalTaskName, finalQuantityTaskExecuted, finalQuantityTaskCompletion}

In another file, I am importing them using the following line:

import {finalTaskName,finalQuantityTaskExecuted,finalQuantityTaskCompletion} from './FinalVariables'

However when I try to use any of the above three variables in the other file, they're always undefined. Is there a reason for this?

I am new to Javascript and React and any help would be appreciated! Thank you!

-------------------------------------------------------------------------------------------Updated-------------------------------------------------------------

I imported the variables as follows :

import * as finalVariables from './FinalVariables' 

When I do a console.log(finalVariables.finalTaskName)

I'm able to print the correct value, but when I try to assign a value to it :

finalVariables.finalTaskName = this.props.item[0].particulars 

I'm getting the following error :

Cannot set property finalTaskName of # which has only a getter

============================= Updated ======================================

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>{finalVariables.finalTaskName}</p> 
<p>{finalVariables.finalQuantityTaskExecuted}</p> 
<p>{finalVariables.finalQuantityTaskCompletion}</p> 

Why are these values not reflecting according to the recent changes? My state constructor looks like this :

this.setState({ finalVariables })

--------------------------------------------------------------------- Updated --------------------------------------

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.

Plus, this is the only place I will be needing shared data, which is why I don't want to use Redux.

Could anyone please suggest code to fix this issue? I am still stuck here and am new to Javascript.

• javascript
• reactjs

• export default? – seanulus Commented Oct 15, 2019 at 20:41
• If I do that , I get the message 'Attempted import error: 'finalQuantityTaskCompletion' is not exported from './FinalVariables'' – sublime_archon Commented Oct 15, 2019 at 20:43
• Could you share more of your code , just to check. – Vijay Venugopal Menon Commented Oct 15, 2019 at 20:54
• you can try import * as someVars from './FinalVariables'; and console.log(someVars); to see what you're importing – Taki Commented Oct 15, 2019 at 20:58
• 2 Why are you trying to set values to your imports? – ngood97 Commented Oct 15, 2019 at 21:14

2 Answers 2

Module exports are readonly by design. If you want some global mutable state, you should do so by exporting a mutable object from a module:

// final-vars.js

export default {
  finalTaskName: 'abc', 
  finalQuantityTaskExecuted: 0, 
  finalQuantityTaskCompletion: 100
};

// other.js

import finalVariables from './final-vars';

// ...

finalVariables.finalTaskName = this.props.item[0].particulars // Allowed

You can create a function in FinalVariables.js file as:

const setFinalTaskName = (value)=>finalTaskName=value

Export and call it from your ponent as:

setFinalTaskName(--new-value--)