Beyond React

Why don't you try using Context?

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.varname. You only have to specify childContextTypes and getChildContext in the parent component and thereafter you can use/modify this from any component by just specifying contextTypes in the child component.

However, please take a note of this as mentioned in docs:

Just as global variables are best avoided when writing clear code, you should avoid using context in most cases. In particular, think twice before using it to "save typing" and using it instead of passing explicit props.

In raw javascript project, you can export a global variable in a file, and import anywhere in other files. That's what you did.

But in React, if you want to use a global state, you should use context API. Your code does not run because myGlobal is not declared as a state. Thus, React cannot track its state.

The correct method is like this:

const {useState, useContext} = React;

// you can create context outside of React component
const CounterContext = React.createContext(0);
// export default CounterContext;


// import CounterContext from 'global/counter-context';
const ChildComponent = () => {

   const counter = useContext(CounterContext);
   
   return (
     <div className="other-component">
     <p>This is Child Component that consumes CounterContext value </p>
     <p>Current counter is: {counter}</p>
     </div>
   );

};

// import CounterContext from 'global/counter-context';
const App = () => {
  const [counter, setCounter] = useState(0);
  return (
      <div className="app">
      <CounterContext.Provider value={counter}>
         <p>This is Context Provider component. Global state is maintained here and you can consume the state value in any other child components</p>
         <label>Click this button to increment global counter state: </label>
         <button onClick={() => setCounter((oldCounter) => (oldCounter + 1))}>
           Increment
         </button>
         <ChildComponent />
      </CounterContext.Provider>
      </div>
    );
};

class Root extends React.Component {
  render() {
    return (<App />);
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

.app {
  border: 1px solid red;
  padding: 5px;
  margin: 5px;
}

button {
  margin-bottom: 5px;
  margin-left: 5px;
}

.other-component {
  border: 1px solid blue;
  padding: 5px;
  margin: 5px;
}

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<div id="root">
</div>

Hooks API Reference

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"){
...

if u want to store a variable globally u can use context api or redux-tool kit here i am giving a rough idea how u can achieve this using context API first Create A folder usually context.. inside this create a file usually name as DataProvider.jsx and do thing like this

import { createContext, useState } from 'react';

export const DataContext = createContext(null);

const DataProvider = ({ children }) => {

const [Client, setClient] = useState([]);


return (
    <DataContext.Provider value={{
       Client, setClient
    }}
    >
        {children}
    </DataContext.Provider>
)

}

export default DataProvider; 

next step u should wrap your app.js like this

import DataProvider from './context/DataProvider';

   function App() {
   return (
   <DataProvider>
     <Home />
   </DataProvider>
   );
}


export default App;

now u can setclient or u can use client data like below

assume u have a file name Client.jsx where u want to set the client data

const { setCleint} = useContext(DataContext)

set the Client data to setClient just as normal state now in similar way u can render the client list anywhere like this

const { Cleint} = useContext(DataContext);