File .deepsource.toml not found in the default branch of the repository root. Please refer to the docs.
Prefer using self closing instead of closing tag for components having no children JS-0468
Empty components are self-closing
6const ViewSubscriptions: FC = () => {
7 const [customers, setCustomers] = useState<CustomerTableItem[]>([]);
8
9 return <div></div>;10};
11
12export default ViewSubscriptions;Empty components are self-closing
431 Use
432 </Button>,
433 ]}
434 closeIcon={<div></div>}435 >
436 <div className="border-b border-gray-200 bg-[#F7F8FD] px-4 py-5 sm:px-6">
437 <h3 className="mb-5">Choose New Plan To Backtest</h3>Empty components are self-closing
380 visible={replacePlanVisible}
381 onCancel={closeplanCurrentModal}
382 onOk={closeplanCurrentModal}
383 closeIcon={<div></div>}384 >
385 <div className="border-b border-gray-200 bg-[#F7F8FD] px-4 py-5 sm:px-6">
386 <h3 className="mb-5">Choose An Existing Plan To Replace</h3>Empty components are self-closing
131 }
132 >
133 <div className="flex flex-col">
134 <p className="text-2xl font-main"></p>135 <p className="text-lg font-main">
136 Your previous key has been revoked
137 </p>Empty components are self-closing
139 Your new key is:{" "}
140 {apiKey ? <Input value={apiKey} readOnly /> : "Loading..."}
141 </p>
142 <p></p>143 </div>
144 </Modal>
145 </div>
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" />;