React HOC ESLint Error: props spreading is forbidden

Question

is eslint just not smart enough? The HOC is pretty generic so I can't really specify the options/props incoming because it's dynamic depending on what component this HOC is wrapping at any given time.

I'm getting props spreading is forbidden

withTracker.tsx

const withTracker = (WrappedComponent: any, options: any = {}) => {
    options.cookieDomain = 'xxxx';
    const trackPage = (page: any) => {
        GoogleAnalytics.set({
            page,
            ...options,
        });
        GoogleAnalytics.pageview(page);
    };

    const HOC = class HOC extends Component <{ location: any }> {
        componentDidMount() {
            const page = this.props.location.pathname;
            trackPage(page);
            window.scrollTo(0, 0);
        }

        componentDidUpdate(prevProps: any) {
            const currentPage = prevProps.location.pathname;
            const nextPage = this.props.location.pathname;

            if (currentPage !== nextPage) {
                trackPage(nextPage);
            }
        }

        render() {
            return <WrappedComponent {...this.props} />;
        }
    };

    return HOC;
};

export default withTracker;

Answer 1

Just disable the eslint rule for the file or that specific line.

render(){
  // eslint-disable-next-line react/jsx-props-no-spreading
  return <WrappedComponent {...this.props} />
}

Answer 2

There's presumably no reason why you can't spread those props; it's just that your ESLint config's opinion is that you shouldn't. The rule is described in the docs ; it's just a matter of code quality and style. Change your code to conform with the rule if you want to, or if you don't want to or you can't, disable the rule at line, file, or config level.