Description
full disclosure: I'm mostly self-learned so I believe there's a nonzero possibility that I don't understand React best practices, but that being said I couldn't find any reason this code wouldn't be valid
- The error is pretty clearly wrong, as it's on a new line. This looks like a clone of jsx-one-expression-per-line with CRLF on Windows #1893 but I actually am using LF line endings (this is actually on OSX, but reproducible on Linux).
- "Fixing" it just adds a blank line below it without removing the error. This is pretty much jsx-one-expression-per-line fix option inserts blank lines #1835.
The reason why I mention code validity is because everything performs as expected if I change the text to a string literal {'Clear'}
or wrap it in some sort of React component / fragment <>Clear</>
. I've never seen code written that way without good reason, like a conditional text, so unless I'm mistaken, I don't think I need to wrap it in the aforementioned ways... but again, could be my inexperience.
I've isolated it to the following rules, but I think they're part of the same package, so I'm not sure why they produce an error when together. Matching eslint tab rules to the eslint-plugin-react rules doesn't change my error.
Using the AirBnB defaults with these rules and the following versions:
"no-tabs": 0,
"react/jsx-indent": [1, "tab"],
"react/jsx-indent-props": [1, "tab"],
"devDependencies": {
"eslint": "^5.12.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.1",
"eslint-plugin-react": "^7.12.4"
}