javascript - 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

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