Must use destructuring props assignment error in constructor

Question

Regarding a lint code validation error:

error  Must use destructuring props assignment  react/destructuring-assignment

I am new to the concept of destructuring properties and I am a bit confused about how I am supposed to use a destructing approach to the following code:

  constructor(props) {
    super(props);
    this.state = {
      clickedFirstTime: !this.props.showDefault,
    };
  }

Note to other people finding this on Google, I have read the following resources to help me understand what destructuring was, but I am just unable to figure out how to do it in this case:

You should *not* use destructuring here. Disable the rule, it just has too many false positives. — Bergi, Dec 12 '20 at 17:49
I feel like I should have a better follow up question but all I can think of is: really? Why was that rule added if it is so bad ? — FMaz008, Dec 12 '20 at 19:18
Link to how to do this: https://stackoverflow.com/questions/51222448/prop-destructuring-inside-of-react-state , answer by Almaju — FMaz008, Dec 12 '20 at 19:25

score 2 · Accepted Answer · answered Dec 12 '20 at 19:23

2

The rule wants you to never write this.props.…. In this case, it's looking for

constructor(props) {
  super(props);
  const { showDefault } = this.props;
  this.state = {
    clickedFirstTime: !showDefault,
  };
}

But really your code is fine, and you should just disable the rule if it is annoying.

answered Dec 12 '20 at 19:23

Bergi

630,263
148
957
1,375

I'm not very strong on my feet yet, so I'd rather keep an annoying rule until I really know I am being annoyed and not wrong or lazy. Dealing with this made me understand destructuring and props spreading. So I guess it was a good thing the rule was there ;) – FMaz008 Dec 12 '20 at 20:03

score 0 · Answer 2 · answered Dec 12 '20 at 18:11

0

  constructor({...props}) {
    super(props);
    this.state = {
      clickedFirstTime: !this.props.showDefault,
    };
  }

answered Dec 12 '20 at 18:11

Artem Bespolov

94
2

1

Althought this technically works, I think props spreading is a bad idea here... – FMaz008 Dec 12 '20 at 20:01
you can add all props what you need, it's just example how spread works {showDefault, ...props} – Artem Bespolov Dec 12 '20 at 20:09
I think it's more elegant than this const { showDefault } = this.props; – Artem Bespolov Dec 12 '20 at 20:11

Must use destructuring props assignment error in constructor

2 Answers2