Unable to call props functions in componentDidMount

Question

From Party.Container where is connected Party with mapStateToProps and mapDispatchToProps, are sent two functions to Party (fetchData and fetchFooter)

They worked until I implemented in project eslint:"airbnb", and now it's constantly getting this error "Must use destructuring props assignment react/destructuring-assignment".

const mapActionsToProps = {
fetchData,
fetchDataFooter,};

--- these are functions

componentDidMount() {
  this.props.fetchData();
  this.props.fetchDataFooter(); }

This is the component

import { connect } from 'react-redux';
import { fetchData, fetchDataFooter } from './actions';

import Party from './Party';

const mapStateToProps = state => ({
  wishlist: state.wishlist,
  cart: state.cart,
});

const mapActionsToProps = {
  fetchData,
  fetchDataFooter,
};

export default connect(mapStateToProps, mapActionsToProps)(Party);
This is COntainer

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Header from '../../components/Header/Header';
import Content from './Content/Content.Container';
import styles from './Party.module.scss';
import Footer from '../../components/Footer/Footer';

const propTypes = {
  wishlist: PropTypes.shape.isRequired,
  cart: PropTypes.shape.isRequired,
  // fetchData: PropTypes.func.isRequired,
  // fetchDataFooter: PropTypes.func.isRequired,
};

class Party extends Component {
  componentDidMount() {
    // this.props.fetchData();
    // this.props.fetchDataFooter();
  }

  render() {
    const { wishlist, cart } = this.props;
    let name;
    let profilePicture;
    let personWishlist;
    let purchases;
    let id;
    if (wishlist.isFulfilled === true) {
      const listId = wishlist.payloadData.data.filter(x => x.id === 1);
      ({ name } = listId[0].name);
      ({ profilePicture } = listId[0].picture);
      ({ personWishlist } = listId[0].wishList);
      ({ purchases } = listId[0].purchases);
      ({ id } = listId[0].id);
    }
    console.log(wishlist, cart);
    return (
      <div className={styles.Party}>
        <Header />
        <Content
          name={name}
          id={id}
          profilePicture={profilePicture}
          personWishlist={personWishlist}
          purchases={purchases}
        />
        <Footer
          cart={cart}
        />
      </div>
    );
  }
}

Party.propTypes = propTypes;

export default Party;

Answer 1

Can you try the one in below in your componentDidMount method as the error suggests:

componentDidMount() {
   const { fetchData, fetchDataFooter } = this.props;
   fetchData();
   fetchDataFooter();
}

Answer 2

Actually, it means that your expressions should be destructured before usage.

E.g.: you're using:

...
this.props.fetchData();
this.props.fetchDataFooter();
...

You have to change it to:

const { fetchData, fetchDataFooter } = this.props;
fetchData();
fetchDataFooter();

Another solution is to disable this if you want to in your rules file.

"react/destructuring-assignment": [<enabled>, 'always'] - can be always or never.

See here for more information.