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:

• Must use destructuring props assignment
• https://medium.com/@lcriswell/destructuring-props-in-react-b1c295005ce0

Answer 1

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.