React JSX differs from the HTML standard in the way it handles newline characters and surrounding whitespace. HTML collapses multiple whitespace
characters (including newlines) into a single whitespace, but JSX removes such sequences completely, leaving no space between inline elements
separated by the line break. This difference in behavior can be confusing and may result in unintended layout, for example, missing whitespace between
the link content and the surrounding text.
To avoid such issues, you should never rely on newline characters in JSX, and explicitly specify whether you want whitespace between inline
elements separated by a line break.
<div>{/* Noncompliant: ambiguous spacing */}
Here is some
<a>space</a>
</div>
<div>{/* Noncompliant: ambiguous spacing */}
<a>No space</a>
between these
</div>
To fix the issue, either insert an explicit JSX space as a string expression {' '}, or insert an empty comment expression {/*
*/} to indicate that the two parts will be joined together with no space between them.
<div>
Here is some{' '}
<a>space</a>
</div>
<div>
<a>No space</a>{/*
*/}between these
</div>
