Prefer using self closing instead of closing tag for components having no children JS-0468
Empty components are self-closing
23 </Box>
24 </Box>
25 <Box width="40%" display={"flex"} justifyContent={"flex-start"}>
26 <Box component={"img"} src="images/loginImage.png" alt={"Login Image"}></Box>27 </Box>
28 </Box>
29 </Box>Empty components are self-closing
131 }}
132 onClick={backdroptry}
133 >
134 <ExtendedNav></ExtendedNav>135 </Backdrop>
136 ) : null}
137Empty components are self-closing
43 color: "#0365F2",
44 }}
45 >
46 Big ideas in small packages <br></br> 47 Start learning now
48 </Typography>
49 </Grid>Empty components are self-closing
80 </Grid>
81
82 <Grid item>
83 <Editorial 84 listHead={"Company"} 85 listingItems={["About", "Careers", "partners", "Code of Conduct"]} 86 ></Editorial> 87 </Grid>
88 </Grid>
89 </Box>Empty components are self-closing
67 </Grid>
68
69 <Grid item>
70 <Editorial 71 listHead={"Useful links"} 72 listingItems={[ 73 "Pricing", 74 "Blinklist business", 75 "Gift cards", 76 "Blinklist magaine", 77 "Contact & help", 78 ]} 79 ></Editorial> 80 </Grid>
81
82 <Grid item>
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" />;