Eslint-plugin-react: `self-closing-comp` warns on elements with whitespace children.
<div> </div> is NOT supposed to be self-closing - the whitespace is reduced to a single space, but it's definitely not zero spaces. Currently the rule recommends that this JSX be self-closed, but that would result in the removal of a space.
ljharb
All 2 comments
Seems difficult for this rule to know when the space is intentional vs a result of some refactoring. The rule currently supports <div>{' '}</div> as valid. Which helps the rule know that the space is intentional. Seems like if we make the rule support <div> </div> it could miss the more likely case where it was a left over from refactoring.
Seems like it might be better to update the documentation for the rule to show that <div>{' '}</div> is valid.
petersendidit
on 6 Aug 2016
The point of the rule is that I should be able to autofix the violations and not change the meaning of the JSX.
If I have <div> </div> the rule should be telling me to change it to <div>{' '}</div>, but NOT to change it to <div /> - and since it's "self-closing-comp", it should only be warning on things that changing to self-closing is _100% identical_.
ljharb
on 6 Aug 2016
Related issues
BrodaNoel
路
3Comments
mericsson
路
3Comments
sompylasar
路
3Comments
mydearxym
路
3Comments
dzhytomyrsky
路
3Comments
Most helpful comment
The point of the rule is that I should be able to autofix the violations and not change the meaning of the JSX.
If I have
<div> </div>the rule should be telling me to change it to<div>{' '}</div>, but NOT to change it to<div />- and since it's "self-closing-comp", it should only be warning on things that changing to self-closing is _100% identical_.