StackOverflow - javascript, reactjs, airbnb-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 ( ); } } 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 ( ); } 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?
Was this helpful?
Related Articles
Have a different question?
Can't find the answer you're looking for? Submit your own question to our community.
🛎️ Get Weekly OTA Fixes
New answers, vendor issues, and updates — straight to your inbox.