Empty components are self-closing
66 ns={ns}
67 defaults={defaultText}
68 components={{
69 Link: <Link external variant={variants.Link.inheritStyle} target='_blank'></Link>,70 }}
71 />
72 </Text>Empty components are self-closing
298 <NoResults crisisData={crisisResults} />
299 ) : (
300 <>
301 <StateAlertBanner302 stateInUS={stateInUS}303 variantInheritStyle={variants.Link.inheritStyle}304 variantBlack={variants.Text.utility1}305 variantWhite={variants.Text.utility1white}306 infoColor={theme.other.colors.secondary.cornflower}307 warningColor={theme.fn.lighten(theme.other.colors.tertiary.pink, 0.3)}308 ></StateAlertBanner>309 {resultDisplay}
310 <Pagination total={getSearchResultPageCount(data?.resultCount)} />
311 </>Empty components are self-closing
240 <title>{t('page-title.base', { ns: 'common', title: '$t(page-title.search-results)' })}</title>
241 </Head>
242 {showCountryAlertMessage && (
243 <CountryAlertBanner244 variant={variants.Text.utility1white}245 variantInheritStyle={variants.Link.inheritStyle}246 ></CountryAlertBanner>247 )}
248
249 <Grid.Col
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" />;