Must use destructuring props assignment error in constructor


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) {
    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:


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

constructor(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.

Collected from the Internet

Please contact javaer1[email protected] to delete if infringement.

edited at


Login to comment


Must use destructuring props assignment (react/destructuring-assignment)

Can I use destructuring assignment with immutable.js?

How to use destructuring assignment to define enumerations in ES6?

Object Destructuring Assignment Behaving Weirdly in Constructor

Can the props in a destructuring assignment be transformed in place?

Destructuring assignment cause error: "unexpected token ="

Error message. "Props with type Object/Array must use a factory function to return the default value."

Use of Colon in object assignment destructuring Javascript

Reactjs eslint rule must use destructuring state assignment

How to fix ESLint error Use array destructuring

Node convert variable value to variable name for use in destructuring assignment

How can I use this in the left side of the object destructuring assignment?

Reactjs ; destructuring props assignment with ESLint rules

How to solve Error Use object destructuring prefer-destructuring - React

Must use destructuring props assignment

How can I implement destructuring assignment for functional react components props?

How to use special characters (like hyphen) in destructuring assignment syntax?

How to use a destructuring assignment inside an object

Must use destructuring props assignment issue

Is this an example of destructuring assignment?

How to namespace Destructuring assignment?

Must use destructuring props assignment in className

component props destructuring error

Error: Must use destructuring state assignment

import props, destructuring assignment & unresolved variable warning

Error when trying to use Destructuring as function parameters

Typescript + React: Use props AND (!) destructuring

Syntax Error on Destructuring Assignment in TypeScript

Must use destructuring theme assignment react/destructuring-assignment