How to declare a var in react.js?

Question

I am trying to integrate my javascript code into the source code of an existing react.js project.

ESLint doesn't allow for var declaration it seems, and I don't understand why.

var distortion = new Tone.Distortion({
  distortion  : 0.6 ,
  oversample  : "3x" 
});

Answer 1

Variable definitions are not allowed in specific conditions in React.

You can't define them inside class component. You can however define the variables inside React hooks (methods), but before the return statement.

Also, I recommend you to use variable definition with const or let instead of var.

class SomeComponent extends Component {
 const someVar = '' // invalid
 render() {
   const someVar = '' // valid
 }
}

someComponent = () => {
  const someVar = '' // valid
  return <OtherComponent someValue={someVar} />
}

If you have class based component, then you can define the variable outside the class (before the class definition).

const someVar = ''
class SomeComponent extends Component {
  render() {
   // use someVar in a hook
  }
}

But it arises question, why don't you use states instead?

Answer 2

If you use react class as component you can't use variables inside ,because classes are objects, but you can assign property to it:

class rComponent extends React.Component {
  distortion = new Tone.Distortion({
    distortion  : 0.6 ,
    oversample  : "3x" 
  });
  render() {
   //....
  }
}