JS Object Destructuring to access property for evaluation purposes without instantiating a variable

Question

I am improving my React js code, using ESLint with eslint-config-airbnb, I am getting errors of type:

• [eslint] Must use destructuring props assignment (react/destructuring-assignment)

I am able to overcome these errors by using JS Object destructuring and if necessary declaring additional variables.

In the following snippet, I use object destructuring to populate the cat variable. However, if I want to do an "if" statement, conditionally against the object destructuring output, I am unable to do that without doing a 2 step process where:

1. Declare the variable to use populating it via object destructuring
2. Use that variable in my "if" statement.

Is there some way to do this without having to declare this "temporary" variable, but still access the inner object property via object destructuring for use within for example an "if" statement.

I have made an attempt below, with the commented code, but it does not compile.

const animals = {
    cat: "brown",
    dog: "white"
};
let cat;
({
    cat
} = animals);

console.log(cat);

if (cat === "brown") {
    console.log("The cat is brown");
};

// Now,  the same "if" statement, but this time I replace the variable called "cat" with lines 6 to 8 above
/*
  if (({
          cat
      } = animals) === "brown")) {
      console.log("The cat is brown");
  };
*/

Here is the actual code which is having the error, I just constructed the example above to focus on the js syntax:

 aTest() {
     if (this.state.shouldToggle === true) {
       this.setState({ activeTabKey: 'hello' })
     } else {
       clearInterval(this.state.timerId)
     }
   }

this.state.shouldToggle - is underlined red with the error "[eslint] Must use destructuring state assignment (react/destructuring-assignment)"

Answer 1

To me, it's very strange that ESLint complains about not using destructuring there. But apparently it does, which means your choices are:

1. Disable the rule if you don't like its requirements. (If it really requires use of destructuring in that code — and I have no reason to doubt your screenshot — the rule seems a bit silly to me, but that's neither here nor there.)

2. Since it's requiring you to use destructuring, in that example it's requiring you to use destructuring assignment (since you have no parameters to destructure), which means you have to have something to assign to, which means creating unnecessary variables/constants:

   aTest() {
     const {shouldToggle, timerId} = this.state;
     if (shouldToggle === true) {
       this.setState({ activeTabKey: 'hello' })
     } else {
       clearInterval(timerId)
     }
   }
   

   That prevents repeating this.state, but makes you repeat shouldToggle and timerId instead, which doesn't seem like a useful trade-off (again, to me, but my opinion isn't what matters here, yours is).

Answer 2

As per your updated question, you should just be able to do:

 aTest() {
  const { shouldToggle, timerId } = this.state
     if (shouldToggle) {
       this.setState({ activeTabKey: 'hello' })
     } else {
       clearInterval(timerId)
     }
   }

---

Continuing with your previous try:

if (({ cat } = animals) === "brown")) {
   console.log("The cat is brown");
};

Will never satisfy the condition.

When you assign a variable using destructuring syntax, it is comparing with object itself. Let me clarify you using simple tests:

if(({test} = {test:13})==13) {
  console.log(test); // will not be logged
}

    if(({test} = {test:13})==undefined) {
      console.log(test); // will not be logged
    }

if(({test} = {test:13})==true) {
  console.log(test); // will not be logged
}

if(({test} = {test:13})==false) {
  console.log(test);
}

if(JSON.stringify(({test} = {test:13})) == JSON.stringify({test:13}) ) {
  console.log(test); // now, this will be logged
}

---

So, you're comparing brown == { cat: 'brown', dog: 'white' } which will never satisfy.

What you must do implement is to assign them in a variable using destructuring syntax as per ESLINT,

const { cat } = animals
if(cat === 'brown') { // Okay