Prefer using self closing instead of closing tag for components having no children JS-0468
Empty components are self-closing
67 return (
68 <>
69 <Head>
70 <meta name='viewport' content='initial-scale=1, width=device-width, viewport-fit=cover'></meta> 71 </Head>
72 <Providers session={session}>
73 <DefaultSeo {...defaultSEO} />Empty components are self-closing
206 ></Link>
207 ),
208 TMFLink: (
209 <Link210 external211 variant={variants.Link.inheritStyle}212 href='https://transmascfutures.inreach.org'213 target='_blank'214 ></Link>215 ),
216 }}
217 />Empty components are self-closing
198 ></Link>
199 ),
200 DonateLink: (
201 <Link202 external203 variant={variants.Link.inheritStyle}204 href='https://inreach.kindful.com/embeds/9e692b4a-fcfc-46a2-9a0e-4f9b8b0bd37b'205 target='_blank'206 ></Link>207 ),
208 TMFLink: (
209 <LinkEmpty components are self-closing
190 ns='landingPage'
191 components={{
192 Link: (
193 <Link194 external195 variant={variants.Link.inheritStyle}196 href='https://inreach.org/introducing-the-redesigned-inreach-app'197 target='_blank'198 ></Link>199 ),
200 DonateLink: (
201 <LinkEmpty components are self-closing
153 .
154 </Link>
155 ),
156 LinkSafety: <PrivacyStatementModal component={Link} {...linkProps}></PrivacyStatementModal>,157 }}
158 />
159 )
Description
Components without children can be self-closed to avoid the unnecessary extra closing tag. In JSX, closing tags are required when the component has children example <MyComponent>...</MyComponent> and if there are no child component between these tags, then this component can be self closed using <MyComponent />. It is recommended as it improves readability, and it is more compact to use self-closing for these types of components.
Bad Practice
var HelloJohn = <Hello name="John"></Hello>;
var HelloJohnCompound = <Hello.Compound name="John"></Hello.Compound>;
Recommended
var HelloJohn = <Hello name="John" />;
var HelloJohnCompound = <Hello.Compound name="John" />;