I have a React application, and sometimes I see {" "} automatically being added in my source code.
Can anyone help me understand why this is happening?
It's not creating any error or bug in application, what's the reason behind it?
For example:
<div className="pr-form display-block">
<input
type="radio"
name="same"
onChange={handleChange("create")}
defaultValue={values.create}
/>{" "}
Create a new requirement
<br />
<input
type="radio"
name="same"
onChange={handleChange("reuse")}
defaultValue={values.reuse}
/>{" "}
Reuse a draft
<br />
<input
type="radio"
name="same"
onChange={handleChange("existing")}
defaultValue={values.existing}
/>{" "}
Using an existing requirement
</div>
Probably you have plugin eslint-plugin-react installed so It automatically add curly braces to whitespace when file saved
Alternatively, we can use (non-breaking spaces), <span> </span> or \u00A0
You can read more about this rule here rules/jsx-curly-brace-presence
Examples of correct code for this rule:
<Color text={"\u00a0"} />
<App>{"Hello \u00b7 world"}</App>;
<style type="text/css">{'.main { margin-top: 0; }'}</style>;
/**
* there's no way to inject a whitespace into jsx without a container so this
* will always be allowed.
*/
<App>{' '}</App>
<App>{' '}</App>
<App>{/* comment */ <Bpp />}</App> // the comment makes the container necessary