Global variable for react

user_7616739 0
Viewed 42452

I don't know, how to use a global variable.

I want to make "this.props.topic.text" a global variable to use it on an other app of my project. How can I do that?

export default class Topic extends Component {

  deleteThisTopic() {
    Topics.remove(this.props.topic._id);
  }

  test() {
  
  }
  render() {
    return (

      <Router>
    <div>
      <ul>
        <Link to="/sub"><li onClick={this.test.bind(this)}>{this.props.topic.text}  ARN:  {this.props.topic.arn}</li></Link>
        <Link to="/log"><button onClick={this.test.bind(this)}>S'inscrire</button></Link>
        <Link to="/"><button >Cacher</button></Link>
        <button onClick={this.deleteThisTopic.bind(this)}>Suprimer</button>
      </ul>

      <hr/>
      <Route exact path="/log" component={AppInscription}/>
      <Route exact path="/sub" component={AppSub}/>


    </div>
  </Router>
  );
  }
}

Topic.propTypes = {

  topic: PropTypes.object.isRequired,
};

reactjs global-variables javascript
6 Answers

You can try this: Declare your global variable before your main component App.js and pass this variable as props down the tree.

Parent.js

var myVar = {}

class MyComponent extends Component {

...
...
myVar = new Object();
...
...
render() {
   return <div>
                 \\ children
                 <MyLeftBranch myVar={myVar} />
                 <MyRightBranch myVar={myVar} />
              </div>
}
}

export default MyComponent;

child.js

class Child extends Component {
     { myVar } = this.props;
     \\use myVar
}
user_91193790

App.js

// Since this.state is global from parent to child components
// This was the easiest solution I've found:

import React, { Component } from "react";
import firebase from "../config";

class App extends Component
 constructor(props) {
     super(props);

     // Set the key to the reference name
     // Assign value to firebase DB collection

     this.state = {
         roomsRef: firebase.firestore().collection("rooms")
     }
}

// reference it anywhere in the component:

componentDidMount() {
    this.getDb(this.state.roomsRef);
}
user_77045100

TypeScript + globalThis

//@ts-ignore TODO cleanup this debug output
globalThis.MY_NAMESPACED_NAME = { something: 'to inspect in the console' }

A bad idea for production code, but useful for debugging.

user_1611820 
To use a global variable, I found a below way : 

    Create a file :
    
    import React from "react";
    
    const AppContext = {};
    
    export default AppContext;
    
    then in App.js, update the value
    import AppContext from './AppContext';
    
    
    AppContext.username = uname.value;
    
    Now if you want the username to be used in another screen:
    
    import AppContext from './AppContext';
    
    AppContext.username to be used for accessing it.


I found another way also ,using localStorage to use it anywhere in the application :

1)Setting the value : 
  localStorage.setItem('username', <set the name>);

2)Getting the value :
localStorage.getItem("username")
user_64331610

Depending on your use case, a good way to use global variables is Context. Basically, what a Context is doing, offers the possibility for every component to access a set of variables everywhere in the code. (Normally, the way variables are passed, is from parent to child)

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

user_116771810
Related