Empty components are self-closing
11 <input type="email" id="email" placeholder="Enter your email address"/>
12 <button id="subscribe-btn">Subscribe</button>
13 </form>
14 <div id="newsletter-response"></div>15 </section>
16 <div>
17
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" />;