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

class Option extends React.Component {
  constructor(props) {
    super(props);
    this.handleClickOption = this.handleClickOption.bind(this);
  }
  handleClickOption() {
    // some code
  }
  render() {
    return (
      <li onClick={this.handleClickOption}>{this.props.option}</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.

React 0.14 introduced pure function components.

This should be the preferred option for all stateless components.

function Option({ onClick, option }) {
    return (
        <li onClick={onClick}>
            {option}
        </li>
    );
}

In ES6 you might do something similar to this:

const Options = (props) => {

    const handleClickOption = () => {
        // some code
    }

    return (
        <li onClick={handleClickOption}>{props.myOptionsListItem}</li>
    );
};

Options.propTypes = {
    // validate props
};

export default Options;

The Stateless functional components will benefit from future React performance optimizations specific to these components. Here's the way we can write component as pure function:

const App = () => {
  return (
    <div>
      <h2 id="heading">Hello ReactJS </h2>
      <header />
    </div>
  );
};

export default App;

However if you want to write component in ES6 style, you still can do but in this case the eslint error need to be removed (if you are using eslint). The following change in .eslintrc file

E.G:

"rules": {
    "react/prefer-stateless-function": "off"
}

Then here ES6 style component you can write with eslint enable:

import React, { Component } from 'react';

class Home extends Component {
  render() {
    return (
      <header className="header">
        <h1>Home page</h1>
      </header>
    );
  }
}

export default Home;

It means you declare stateful component in react without construct. The scenario can be like this

import React, { Component } from 'react';

class Something extends Component {
   render() {
      return (
        <div>Your classes</div>
      )
   }
}

Above code is wrong so the right code should be like this

class Something extends Component {

   constructor(props) {
      super(props);
      this.props = props;
   }

   render() {
      return (
        <div>Your classes</div>
      )
   }
}

I have a similar problem. Does anybody knows how to call a component specific prop inside of the passed click-function.

E.g.

function ElementRow({onClick, element, key}) {
  return (
    <tr key={key}>
      <td><a href="#" onClick={onClick}>Delete</a></td>
      <td>
        ...
      <td>{ element.first } { element.last }</td>
    </tr>
  );
}

Inside of the onClick function I need the element.id. I am looking for a solution without using bind()

I know how to get it work with React.createClass or extend React.Component but not written as a pure function.

Edit: Found a solution but I am not sure if it's a code smell. :)

function ElementRow({ onClick, element, key }) {
  const _onClick = (e) => {
    onClick(e, element.id);
  };

  return (
    <tr key={key}>
      <td><a href="#" onClick={_onClick}>Delete</a></td>
      <td>
        ...
      </td>
      <td>{ element.first } { element.last }</td>
    </tr>
  );
}