how to solve Component should be written as a pure function error in eslint-react?

Question

const Header = React.createClass({
  contextTypes: {
    router: React.PropTypes.object.isRequired,
  },

  render() {
    return (
        <li className={this.context.router.isActive('a') ? 'active' : ''}>
          <Link to="/a/">A</Link>
        </li>
        <li className={this.context.router.isActive('b') ? 'active' : ''}>
          <Link to="/b/">B</Link>
        </li>
    );
  },
});

I use eslint-config-airbnb to check the above code and it show me an error msg like Component should be written as a pure function .

So how to change the above component to pure function?

Thanks for your help.

aw04 · Answer 1 · 2016-06-02T17:57:12.637

4

When you have a "dumb" component (no internal state, lifecycle methods, etc.), you may write it as a simple javascript function as opposed to using React.CreateClass or extending React.Component.

Check out the docs here for general information on pure functions as components and here for information specific to context.

So in your case:

function Header(context) {
  return (
    <li className={context.router.isActive('a') ? 'active' : ''}>
      <Link to="/a/">A</Link>
    </li>
    <li className={context.router.isActive('b') ? 'active' : ''}>
      <Link to="/b/">B</Link>
    </li>
  );
}

Header.contextTypes = {
  router: React.PropTypes.object.isRequired,
}

edited Jun 02 '16 at 17:57

answered Jun 02 '16 at 17:34

aw04

10,857
10
56
89

I try that and in header function context Object have only get key and get ref property, router is undefined. – Veljko Simic Jun 02 '16 at 17:48
Did you include the Header.contextTypes line as well? – aw04 Jun 02 '16 at 17:50
Yes i include that line. – Veljko Simic Jun 02 '16 at 17:51
Hmm, it should work. Did you change this.context.router to just context.router? I've updated my answer with the complete code, I was unclear about what to do with your render method – aw04 Jun 02 '16 at 17:56
I just copyed that code and I get 'Cannot read property 'isActive' of undefined thet error', also router is undefined. – Veljko Simic Jun 02 '16 at 18:07
Perhaps you can create a simple runnable example – aw04 Jun 02 '16 at 18:13

score 0 · Answer 2 · answered Mar 27 '17 at 15:56

You could also try the ES6 way:

const Header = (context) => (
  <li className={context.router.isActive('a') ? 'active' : ''}>
    <Link to="/a/">A</Link>
  </li>
  <li className={context.router.isActive('b') ? 'active' : ''}>
    <Link to="/b/">B</Link>
  </li>
);

Header.contextTypes = {
  router: React.PropTypes.object.isRequired,
}

export default Header;

score -1 · Answer 3 · answered Sep 07 '16 at 05:47

I use some fake props to bypass this error:

export default class NavItem extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    const { router } = this.context;
    const { index, onlyActiveOnIndex, to, children } = this.props;
    const isActive = router.isActive(to, onlyActiveOnIndex);
    const LinkComponent = index ? IndexLink : Link;
    return (
      <li className={isActive ? 'active' : ''}>
        <LinkComponent to={to}>{children}</LinkComponent>
      </li>
    );
  }
}

NavItem.propTypes = {
  children: React.PropTypes.node.isRequired,
  index: React.PropTypes.bool,
  onlyActiveOnIndex: React.PropTypes.bool,
  to: React.PropTypes.oneOfType([
    React.PropTypes.string,
    React.PropTypes.object,
  ]).isRequired,
};
NavItem.contextTypes = {
  router: React.PropTypes.object,
};

This is not best practice. – John Meyer Nov 28 '16 at 20:55 — John Meyer, Nov 28 '16 at 20:55

how to solve Component should be written as a pure function error in eslint-react?

3 Answers3

Linked