How to fix the warning caused by thread function types using eslint-plugin-react?
I am getting a warning on the next line of my react component
handleToggle: Function;
I am using eslint-plugin-react and Flow and I am getting a warning "handleToggle must be placed after constructor". This is due to the reaction rule / sort -comp. I tried the following on my .eslintrc.json
"react/sort-comp": [1, {
"order": [
"static-methods",
"lifecycle",
"everything-else",
"render"
],
"groups": {
"lifecycle": [
"displayName",
"propTypes",
"contextTypes",
"childContextTypes",
"/^.*: Function$/",
"mixins",
"statics",
"defaultProps",
"state",
"constructor",
"getDefaultProps",
"getInitialState",
"getChildContext",
"componentWillMount",
"componentDidMount",
"componentWillReceiveProps",
"shouldComponentUpdate",
"componentWillUpdate",
"componentDidUpdate",
"componentWillUnmount"
]
}
}]
But I cannot fix this warning. I want the types of functions before the constructor to be the same as in other type definitions. How can I achieve this?
source to share
The problem is eslint-plugin-react
not being aware of the thread, so there is no group for "type definitions". You can do eslint to put type definitions at the beginning of your component, moving "everything-else"
to the beginning of your component (before "static-methods"
, but this will also allow you to define any functions or instance variables (in case you are using them) before constructor
.
those. change your .eslintrc.json
to:
"react/sort-comp": [1, {
"order": [
"everything-else",
"static-methods",
"lifecycle",
"render"
],
"groups": { /* ... */ }
}]
source to share