33 className="h-16 w-16 rounded-xl"
34 />
35 ) : (
36 <div className="h-16 w-16 bg-red-500 rounded-xl"></div>37 )}
38 <div className="ml-2 block">
39 <h3 className="font-bold">{product.name}</h3>
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"
164 Start a conversation
165 </p>
166 )}
167 <div ref={lastMsg}></div>168 </div>
169 </div>
170 );
89 </div>
90 <hr className="h-[2px] bg-gray-200" />
91 </div>
92 <div className={'mb-24'}></div>93 <BasicInfo />
94 </div>
95 )
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.
var HelloJohn = <Hello name="John"></Hello>;
var HelloJohnCompound = <Hello.Compound name="John"></Hello.Compound>;
var HelloJohn = <Hello name="John" />;
var HelloJohnCompound = <Hello.Compound name="John" />;