Handling unused props in the render method

Issue Description

We have some components that have props not used inside the render method. We should be consistent on how we handle them.

Issue Type

• New Feature
• Enhancement
• Bug
• Other

Expected Behavior

Method 1: delete the props so they are not spread

  render() {
    const { children, ...customProps } = this.props;
    const clonedChilItems = this.clonedChildItems(children);
    if ('onClick' in customProps) {
      delete customProps.onClick;
    }
    if ('onKeyDown' in customProps) {
      delete customProps.onKeyDown;
    }
    return (
      <TableRows {...customProps}>
        {clonedChilItems}
      </TableRows>
    );
  }

}

Method 2: ignore the eslint rule

  render() {
    /* eslint-disable no-unused-vars */
    const { defaultElement, tiny, small, medium, large, huge, responsiveTo, ...customProps } = this.props;

    return (
      <div {...customProps} ref={this.setContainer}>
        {this.props[this.state.element]}
      </div>
    );
  }
}

Current Behavior

[emilyrohrbough]

As this CHANGELOG mentioned, airbnb base 11.1.1 enables ignoreRestSiblings no-unused-vars, which removes of the no-unused-vars eslint error. This removes the need to delete props that should not be spread.

[Matt-Butler]

https://github.com/airbnb/javascript/blob/d48083796c3a1442e44c86b050cc65a353f9bf43/packages/eslint-config-airbnb-base/CHANGELOG.md#1111--2017-03-03