Javascript: Destructuring props in react

[JPeer264]

• eslint-config-airbnb: 17.1.0
• eslint: 5.6.0

I have a container with redux in my application. I am calling the in the connect assigned prop in componentDidMount where the eslint error react/destructing-assignment appears. But when I destruct the prop, then I have a name collision with startup. Is this the wanted behavior? Or is it preferred to name the prop differently when binding? I couldn't find anything in the style guide according to this.

This exact same code worked fine with another project with v15.1.0

import React, { PureComponent } from 'react';
import { View } from 'react-native';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import { startup } from '../../redux/appStatus/appStatus.actions';

class App extends PureComponent {
  componentDidMount() {
    // this here is an error
    this.props.startup();
  }

  render() {
    return <View />;
  }
}

const mapDispatchToProps = dispatch => bindActionCreators({
  startup,
}, dispatch);

export default connect(undefined, mapDispatchToProps)(App);

[arcticicestudio]

You can use an aliased import for startup to avoid the name collision, e.g.

import { startup as actionStartup } from '../../redux/appStatus/appStatus.actions';

and then use destructing in componentDidMount.

[JPeer264]

This is just another naming import right? So, startup won't really exist anymore at this moment. Currently I use another binding in bindActionCreators:

const mapDispatchToProps = dispatch => bindActionCreators({
  actionStartup: startup,
}, dispatch);

And use destruction in componentDidMount. But I ask myself if this is the wanted behavior of this styleguide.

[ljharb]

Yes, the desired behavior is to always destructuring every prop, even if that means you have to rename things to avoid collisions.

[JPeer264]

Alright thanks, then I will stick to this.