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

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;