jsx-eslint/eslint-plugin-react
Auf GitHub ansehen[Bug]: `react/jsx-sort-props` causes errors when an inline comment follows a JSX prop
Open
#3.936 geöffnet am 6. Juli 2025
bughelp wanted
Beschreibung
Is there an existing issue for this?
- I have searched the existing issues and my issue is unique
- My issue appears in the command-line and not only in the text editor
Description Overview
Reproduction:
const ProblematicComponent: React.FC = () => {
return (
<div
onClick={() => console.log()} // Comment
className={'flex'}>
<span>Problematic Component</span>
</div>
)
}
Actual behavior:
eslintupdates the file to
const ProblematicComponent: React.FC = () => {
return (
<div
className={'flex'}
onClick={() => console.log()} // Comment>
<span>Problematic Component</span>
</div>
)
}
export default ProblematicComponent
and multiple errors pop up, like
JSX expressions must have one parent element. ts (2657)
and
Parsing error: Identifier expected. eslint
ESLint config:
{
"plugins": ["react"],
"rules": {
"react/jsx-sort-props": ["error"]
}
}
Expected Behavior
Expected behavior:
- No autofix corruption or mis-sorting.
- Comment should remain properly attached to
onClick.
eslint-plugin-react version
^7.34.2
eslint version
^8.40.0
node version
v22.16.0