How to rewrite the component of the reaction with decorators as a pure function?

Question

I use the airbnb eslint settings, which have a rule that forces replacement of stateless components, which will be rewritten as a pure function . The following component launches this rule, which means that the component below is 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 message 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 clean component and attach a decoder? Or is it a mistake in the rules for intercepting airbnb and is it impossible to comply with both rules?

Answer 1

Ok, so the problem is 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 is not very, but it works, and it does not cause any errors.