In my class, eslint is complaining "Expected 'this' to be used by class method 'getUrlParams'
Here is my class:
class PostSearch extends React.Component {
constructor(props) {
super(props);
this.getSearchResults();
}
getUrlParams(queryString) {
const hashes = queryString.slice(queryString.indexOf('?') + 1).split('&');
const params = {};
hashes.forEach((hash) => {
const [key, val] = hash.split('=');
params[key] = decodeURIComponent(val);
});
return params;
}
getSearchResults() {
const { terms, category } = this.getUrlParams(this.props.location.search);
this.props.dispatch(Actions.fetchPostsSearchResults(terms, category));
}
render() {
return (
<div>
<HorizontalLine />
<div className="container">
<Col md={9} xs={12}>
<h1 className="aboutHeader">Test</h1>
</Col>
<Col md={3} xs={12}>
<SideBar />
</Col>
</div>
</div>
);
}
}
What is the best approach to solve this or refactor this component?
you should bind the function to this as the ESLint error says "Expected 'this' to be used by class method 'getUrlParams'
getUrlParams = (queryString) => { .... }
as you are not using getUrlParams during render (like onClick()) so the above technique is good which we can call it "usage of arrow function in class property".
there are other ways of binding too:
this.getUrlParams=this.getUrlParams.bind(this)onClick={()=>this.getUrlParams()} assumed that function does not have params.React.createClass which with ES6 does not make sense :)This is a ESlint rule, see class-methods-use-this.
You could extract the method getUrlParams and put it into a helper, or to make it static.
What could you also do is to move the this.props.location.search inside the method, therefore calling the this.getUrlParams() method without parameter, as it seems you are using it only once.
Therefore, this could look like:
getUrlParams() {
const queryString = this.props.location.search;
...
return params;
}
A last option would be to disable this ESlint rule.
getUrlParams = queryString => { ... }