Empty components are self-closing
9 <>
10 {/* <Navbar /> */}
11 <div className="ErrorPage">
12 <img className="error_emg" src={imgx} alt="404 pic"></img>13 <h1>Oops! Something went wrong</h1>
14 <p>
15 <i>{error?.statusText || error?.message}</i>
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" />;