EN
ESLint - Must use destructuring state assignment eslint (react/destructuring-assignment)
1
answers
8
points
Why VS Code displays ESLint error for my component:
(property) App.state: {
modalOpen: boolean;
}
Must use destructuring state assignment eslint (react/destructuring-assignment)
My component code:
import React, { Component } from 'react';
import WelcomeModal from './WelcomeModal';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
modalOpen: true
};
}
// some code here ...
handleModalClose = () => {
this.setState({
modalOpen: false
});
};
render() {
return (
<div className="App">
<WelcomeModal
open={this.state.modalOpen}
onClose={this.handleModalClose}
/>
<div className="App-body">
{/* some code here ... */}
</div>
</div>
);
}
}
1 answer
5
points
Because you should use:
const { modalOpen } = this.state;
instead of:
this.state.modalOpen.
Fixed the component code:
import React, { Component } from 'react';
import WelcomeModal from './WelcomeModal';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
modalOpen: true
};
}
// some code here ...
handleModalClose = () => {
this.setState({
modalOpen: false
});
};
render() {
const { modalOpen } = this.state; // <----------- fix here
return (
<div className="App">
<WelcomeModal
open={modalOpen} // <---------------- fix here
onClose={this.handleModalClose}
/>
<div className="App-body">
{/* some code here ... */}
</div>
</div>
);
}
}
0 comments
Add comment