How to declare global variables in React JS

Question

I've been searching all over the net, including stack overflow, how to declare global variables in JS React.

I have a declared variable called name and I'd like to use this variable in two different sections of my code. But I it returns as an undefined variable in some sections of the code, even though I've left it outside all the functions, as global variables usually are.

Is there supposed to be a special way to declare global variables in React?

My Js React Code -- its a very simple sample of my code to give insight

/* I need this variable to be global so that 
 * I can you it inside "DataAreaOne" and "DataAreaTwo" 
 */

var name = 'empty'; 

/*************************FIRST PART***************/

var DataAreaOne = _react2.default.createClass({
    displayName: 'DataAreaOne',

    render: function render() {

        if(name != "something"){

        // change name to something else
        name = "something else";
            return _react2.default.createElement(
                'div',
                { className: 'container-for-stats' },

                _react2.default.createElement(
                    'div',
                    { className: 'name-for-stats' },
                    'some data goes here'
                ) 

            );
        }  

    }

});

/*************************SECOND PART***************/

var DataAreaTwo = _react2.default.createClass({
    displayName: 'DataAreaTwo',

    render: function render() {

        if(name == "something else"){

            return _react2.default.createElement(
                'div',
                { className: 'container-for-stats' },

                _react2.default.createElement(
                    'div',
                    { className: 'name-for-stats' },
                    'some data goes here'
                ) 

            );
        }else{
            alert('nothing found');
        }  

    }

});

Answer 1

Have a look at react Context :

https://reactjs.org/docs/context.html

simple example:

const ThemeContext = React.createContext('name');

if you are using react 16.2 and lower use this legacy react context:

https://reactjs.org/docs/legacy-context.html

You can declare a global context variable in any of the parent components and this variable will be accessible across the component tree by this.context.name. You only have to specify childContextTypes and getChildContext

or if you want the "ugly" way, do this: inside vars.js

declare var Name = 'empty';
export default window.Name;

then import './vars' in the file that contains "DataAreaOne" and "DataAreaTwo"

import Name from './vars';

then inside the class

name = Name;

and use it like so

...
if(this.name != "something"){
...

Answer 2

The global scope in React Native is variable global. For ex: as global.foo = foo, then you can use global.foo anywhere as a global variable.

The global scope may be used to store the global config or similar things. Share variables between different views, as your description, you can choose many other solutions(use redux,flux or store them in a higher component), the global scope is not a good choice.

A good practice to define global variable is to use a js file. For example global.js

global.foo = foo;
global.bar = bar;

Then, to make sure it is executed when project initialized. For example, import the file in index.js:

import './global.js'
// other code