react - declare global variable inside of a react component

Question

How does this work?

I want to declare a variable inside of a react component class and use it in several different areas in my app.

The attempt looks like this:

class ColorPick extends React.Component {
  colorInput;

  constructor(props) {
    super(props);
    this.state = {
      color: "Let's pick a color"
    };
  }

  // use this many times in my app
  colorInput = document.getElementById("colorInput").value;

  changeColor(event) {
    this.setState({
      color: "#" + event.target.value,
      backgroundColor: "#" + event.target.value
    });

    if (colorInput === "") {
      this.setState({
        color: "Let's pick a color",
        backgroundColor: "#fff"
      });
    }
  }
}

What happens is I get this error:

Error in ./src/components/colorpicker.jsx Syntax error: Unexpected token (12:8)

10 | } 11 |

12 | var colorInput = document.getElementById('colorInput').value; | ^ 13 | 14 | changeColor(event) { 15 | this.setState({

@ ./src/index.js 29:19-54

I don't understand why this happens, and I can't find any documents that explain this clearly.

How to declare global variables in React JS

So I did:

global.js:

global.colorInput = colorInput;

colorpicker.js:

import React, { Component } from 'react';
import Global from './global'

class ColorPick extends React.Component {

    constructor(props) {
      super(props);
      this.state = {
        color: "Let's pick a color"
      };
    }

    var colorInput = document.getElementById('colorInput').value;

    changeColor(event) {
      this.setState({
        color: '#' + event.target.value,
        backgroundColor: '#' + event.target.value
      });

      if (colorInput === '') {
        this.setState({
          color: "Let's pick a color",
          backgroundColor: "#fff",
      });
    }
   }

I still get the same error. Why?

How do I create a globally accessible variable in React JS

Doesn't quite answer my question in the context I'm looking for.

How can I declare a variable inside of a react class/component and reuse it? How does that work?

Answer 1

You have a problem with your ColorPick component: you are trying to define a class field declaration using the var keyword. This is why you are getting a syntax error. Also, field declarationsin classes are an experimental feature. Meaning, you'll have to use some pre-processor to transpile your code to ES5, so it works on browsers that don't support this feature.

Take a look at the Fields declarations documentation for more information.

And, instead of assigning it to the document.getElementById('colorInput').value at the field declaration you should do it inside the constructor. Then you'll have the most updated value. Here is how I would re-write your component:

class ColorPick extends React.Component {
  colorInput;

  constructor(props) {
    super(props);
    this.state = {
      color: "Let's pick a color"
    };
    this.colorInput = document.getElementById("colorInput").value;
  }

  changeColor(event) {
    this.setState({
      color: "#" + event.target.value,
      backgroundColor: "#" + event.target.value
    });

    if (colorInput === "") {
      this.setState({
        color: "Let's pick a color",
        backgroundColor: "#fff"
      });
    }
  }
}

Now, there are several ways to share data between components without needing to define variables in the Global Scope. See React's "Lifting State Up" documentation page to some introduction of how you can deal with this. Then you can also try something like React Context, or Redux.

If you want to declare something in the Global Scope you can use the window object.

window.myGlobalVar = '#FFF'

You are going to have to check how it is mutated throughout the app's lifecycle, so I suggest you try other alternatives first.

Answer 2

Take a look at context: https://reactjs.org/docs/context.html. In react your issue can be managed with that.

Answer 3

To define a global variable in ReactJS you can create a Context, so you can pass around in a React App. you can define your variable like this:

GlobalColor.js:

import React from 'react'

const GlobalColor = React.createContext({});
export const ColorProvider = GlobalColor.Provider;
export const ColorConsumer = GlobalColor.Consumer;
export default GlobalColor;

Here we have a Provider component which provides the value and Consumer component which is consuming (using) the value.

Provider code might be something like this:

ColorPickerProvider.js:

import React from 'react'
import ColorPickerConsumer from './ColorPickerConsumer'
import { ColorProvider } from './GlobalColor'

function ColorPicker() {
  const color = 'blue'
  return (
    <ColorProvider value={color}>
      <ColorPickerConsumer />
    </ColorProvider >
  )
}

Now any child has access to the color.

In the next step you can use the code below where you want to use(consume) the color value:

ColorPickerConsumer.js:

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

class ColorPickerConsumer extends Component {
  static contextType = GlobalColor;
  render() {
    const color = this.context;
    return <div>{color}</div>;
  }
}
export default ColorPickerConsumer;