Languages

ESLint - Must use destructuring state assignment eslint (react/destructuring-assignment)

8 points
Asked by:
JustMike
29820

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
Answered by:
JustMike
29820

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
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join