Liu Dongyu Liu Dongyu - 11 months ago 399
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) {
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 Source

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