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

Question

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.

Answer 1

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