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 ponent to pure function?

Thanks for your help.

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 ponent to pure function?

Thanks for your help.

• javascript
• reactjs
• react-router

3 Answers 3

When you have a "dumb" ponent (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 ponents 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,
}

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;

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,
};