Liu Dongyu Liu Dongyu - 1 year ago 472
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.

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}>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download