Liu Dongyu Liu Dongyu - 4 months ago 133
React JSX Question

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

class Option extends React.Component {
constructor(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}>