React Redux with ESLint rules

Question

in using React and Redux with Airbnb style and ESlint rules I have some confusions mostly about destructuring and upper scope:

import user from "./userModel";

class MyName extends Component {
  state = { user, size:0 };
render() {
    const {size}=this.state ; 
    const { username, items, location } = this.state.user;
    return (...)}}
MyName.propTypes = {createNewUser: PropTypes.func.isRequired
  // users: PropTypes.object};
const mapStateToProps = state => ({users: state.users});
export default connect(mapStateToProps,{ createNewUser})(MyName);

in this code at destructuring the state, ESLint says Must use destructuring state assignment (react/destructuring-assignment) and when I re-write it as

const {size, user}=this.state ; 
const { username, items, location } = user;

again I receive

'user' is already declared in the upper scope. (no-shadow)

the same type of warnings is shown in the when I deconstruct users(of the store) like const {users}=this.props; it says 'users' is missing in props validation (react/prop-types) and when I define it in propTypes, it says object is forbidden

Answer 1

You can "rename" the variable while destructuring to prevent a conflict:

const { size, user: currentUser } = this.state;

The takes the value from this.state.user and assigns it to currentUser .