CODEWITHSUNDEEP
javascriptreactjseslint
PositiveGuy
PositiveGuy

Reputation: 20232

React HOC ESLint Error: props spreading is forbidden

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

enter image description here

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;

Upvotes: 1

Views: 1269

Answers (2)

Matt
Matt

Reputation: 108

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} />
}

Upvotes: 1

user14057908
user14057908

Reputation:

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.

Upvotes: 1

Related Questions