javascriptreactjsairbnb-js-styleguide

How do I rewrite a react component with decorators as a pure function?


I'm using the airbnb eslint settings, which have a rule that enforces stateless react components to be rewritten as a pure function. The following component triggers this rule, which means that the component below would be better written as a pure function:

import React from 'react';
import { observer } from 'mobx-react';
import cssmodules from 'react-css-modules';

import styles from './index.css';
import Select from '../Select/';
import List from '../List/';

@cssmodules(styles)
@observer
export default class Analysis extends React.Component {
  render() {
    return (
      <div styleName="wrapper">
        <div styleName="column">
          <Select store={this.props.store} />
        </div>
        <div styleName="column">
          <List store={this.props.store} />
        </div>
      </div>
    );
  }
}

Analysis.propTypes = {
  store: React.PropTypes.object.isRequired,
};

However, when I rewrite it as a pure function (see below), I get the error that Leading decorators must be attached to a class declaration:

import React from 'react';
import { observer } from 'mobx-react';
import cssmodules from 'react-css-modules';

import styles from './index.css';
import Select from '../Select/';
import List from '../List/';

@cssmodules(styles)
@observer
function Analysis(props) {
  return (
    <div styleName="wrapper">
      <div styleName="column">
        <Select store={props.store} />
      </div>
      <div styleName="column">
        <List store={props.store} />
      </div>
    </div>
  );
}

Analysis.propTypes = {
  store: React.PropTypes.object.isRequired,
};

So can I write it as a pure component and still attach the decorators? Or is this a mistake in the airbnb linting rules and is it impossible to satisfy both rules?


Solution

  • Ok, so the problem is the es7 style decorators. Desugaring them solves the problem:

    import React from 'react';
    import { observer } from 'mobx-react';
    import cssmodules from 'react-css-modules';
    
    import styles from './index.css';
    import Select from '../Select/';
    import List from '../List/';
    
    function Analysis(props) {
      return (
        <div styleName="wrapper">
          <div styleName="column">
            <Select store={props.store} />
          </div>
          <div styleName="column">
            <List store={props.store} />
          </div>
        </div>
      );
    }
    
    Analysis.propTypes = {
      store: React.PropTypes.object.isRequired,
    };
    
    export default cssmodules(observer(Analysis), styles);
    

    It's not pretty, but it does work and it doesn't trigger any errors.