Liu Dongyu Liu Dongyu - 5 days ago 5
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

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