title: Reactjs eslint rule must use destructuring state assignment
body: <pre><code>class MyDrawer extends Component {
    const modalOpen = this.state;
  
    render() {
      return (
        &lt;div&gt;
          &lt;Drawer
            modal
            open={this.state.modalOpen} // &lt;-- this line show error [eslint] Must use destructuring state assignment (react/destructuring-assignment)
            onClose={() =&gt; this.setState({ modalOpen: false })}
          &gt;
          &lt;/Drawer&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default MyDrawer;
  </code></pre>
  
  <p>I tried change the line to be <code>const { modalOpen } = this.state;</code> but now Failed to compile.</p>
  
  <p>How can i follow the rule and edit my code to be Compiled successfully?</p>