Prefer using self closing instead of closing tag for components having no children JS-0468
Empty components are self-closing
170 backgroundSize: "cover",
171 }}
172 ></div>
173 <div174 className="color"175 style={{176 backgroundColor: product.color || "white",177 }}178 ></div>179 <div className="product-card__body" style={{}}>
180 {/* <img /> */}
181 <div className="product-name">{product.name}</div>Empty components are self-closing
162 <ul className="product-gallery">
163 {products.map((product) => (
164 <li className="product-card" key={product.id}>
165 <div166 className="image"167 style={{168 background: `url(${product.image})`,169 backgroundPosition: "center",170 backgroundSize: "cover",171 }}172 ></div>173 <div
174 className="color"
175 style={{Empty components are self-closing
27 <div className="horizantal-layout">
28 <Header user={userStore} onLogin={onLogin} onLogout={onLogout} />
29 <div className="horizantal-layout__content">
30 <div className="background"></div>31 <div className="content">{children}</div>
32 </div>
33 </div>Empty components are self-closing
4 return (
5 <div className="loading">
6 <div className="loading__container">
7 <div className="loading__container__circle"></div> 8 </div>
9 </div>
10 );
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" />;