Empty components are self-closing
35 className="h-16 w-16 rounded-xl"
36 />
37 ) : (
38 <div className="h-16 w-16 bg-red-500 rounded-xl"></div>39 )}
40 <div className="ml-2 block">
41 <h3 className="font-bold">Empty components are self-closing
24 <h1 className={'w-max'}>{product.description} </h1>
25 )}
26 </div>
27 <div className={'divider divider-vertical'}></div>28 <div
29 className={
30 'xsm:mx-auto xsm:relative xsm:text-center right-0 absolute mr-4'Empty components are self-closing
166 Start a conversation
167 </p>
168 )}
169 <div ref={lastMsg}></div>170 </div>
171 </div>
172 )
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" />;