destructuring-assignment should not trigger when a dynamic property name is accessed

Example:

    getChildContext() {
        return {getProp: (prop) => this.props[prop]};
    }

There’s no way to change this to use destructuring, so the rule should not apply unless it’s this.props.foo or this.props['foo'].

[CristianoYL]

Hi guys, I have a similar question. I’m quite new to React, so please correct me if I err.

I’m using React and Redux, and Redux allows me to expose the action creator functions as props inside my React component (using the bindActionCreators() function). I’ve attached my relevant code below, it’s a bit verbose.

The problem is that I’m fine with the destructuring pattern, but since queryVariants is already imported, I shall not declare another prop using this name. Any suggestions? Thank you!

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { queryVariants } from '../../actions';

// class-based component
class SearchBar extends Component {

  render() {
    return (
      <div>
           <button 
              onClick={() => { this.props.selectVariant(someData); }} 
           />
      </div>
    );
  }
}

// this function allows queryVariant function show up as a prop
function mapDispatchToProps(dispatch) {
  return bindActionCreators({ queryVariants }, dispatch);
}

export default withStyles(styles)(connect(null, mapDispatchToProps)(SearchBar));

[UPDATE] I removed some of the irrelavent code just to show the high-level structure of the component. It may be psuedo-code. The error comes from this line: onClick={() => { this.props.selectVariant(someData); }} where selectVariant() is exposed as props by redux.

[ljharb]

const { [prop]: foo } = this.props;

But you shouldn’t be dynamically reaching into props; exposing that kind of unfettered prop access to children totally violates the data model of React.