File .deepsource.toml not found in the default branch of the repository root. Please refer to the docs.
Prefer shorthand form for react fragments JS-0410
Prefer fragment shorthand over React.Fragment
55 }, [plan]);
56
57 return (
58 <Fragment>59 {isLoading && <LoadingSpinner />}60 {isError && (61 <div className="flex flex-col items-center justify-center h-full">62 <h2 className="mb-5">Could Not Load Plan</h2>63 <Button type="primary" onClick={() => navigate(-1)}>64 Go Back65 </Button>66 </div>67 )}68 {plan !== undefined && versionIndex !== undefined && (69 <EditPlan type={type} plan={plan} versionIndex={versionIndex} />70 )}71 </Fragment>72 );
73};
74export default EditPlanLoader;Prefer fragment shorthand over React.Fragment
84 };
85
86 return (
87 <Fragment> 88 <Typography.Title level={2}>Activity Stream</Typography.Title> 89 <div className="w-1/2 justify-center"> 90 <Paper border={true}> 91 <ul role="list" className="divide-y divide-gray-200"> 92 {activityItems?.results.map((activityItem) => ( 93 <li key={activityItem.id} className="py-4"> 94 <div className="flex space-x-3"> 95 <div className="flex-1 space-y-3"> 96 <div className="flex items-center justify-between"> 97 <h3 className="font-bold"> 98 User<b> {activityItem.actor.string_repr}</b> 99 </h3>100 <h3 className=" text-gray-500">101 {dayjs(activityItem.timestamp).format(102 "YYYY/MM/DD HH:mm:ss"103 )}104 </h3>105 </div>106 <h3 className="m">107 {activityItem.verb}{" "}108 <b>{activityItem.action_object.string_repr}</b> (109 {activityItem.action_object.object_type})110 {activityItem?.target ? (111 <h3 className="mt-1">112 on <b>{activityItem.target.string_repr}</b> (113 {activityItem?.target.object_type})114 </h3>115 ) : (116 ""117 )}{" "}118 </h3>119 </div>120 </div>121 </li>122 ))}123 </ul>124 </Paper>125126 {!activityItems && !!cursor && (127 <div className="loadMoreSpinner">128 <LoadingSpinner />.129 </div>130 )}131132 <div className="separator mb-5 mt-5" />133134 <CustomPagination135 cursor={cursor}136 previous={previous}137 next={next}138 currentPage={currentPage}139 handleMovements={handleMovements}140 />141 </div>142 </Fragment>143 );
144}
Prefer fragment shorthand over React.Fragment
52 activityItems?.results.length === 0
53 ) {
54 return (
55 <Fragment> 56 <Typography.Title level={2}>Activity Stream</Typography.Title> 57 <div className="align-center"> 58 <h3 className="text-xl font-main align-center">No Activities</h3> 59 <div className="separator mb-5 mt-5" /> 60 </div> 61 </Fragment> 62 );
63 }
64Prefer fragment shorthand over React.Fragment
41
42 if ((isLoading || !activityItems) && !cursor) {
43 return (
44 <Fragment> 45 <Typography.Title level={2}>Activity Stream</Typography.Title> 46 <LoadingSpinner />. 47 </Fragment> 48 );
49 }
50 if (Prefer fragment shorthand over React.Fragment
596 )}
597
598 {metricStateful === true && (
599 <Fragment>600 <div className="separator mb-8"></div>601 <div className="grid grid-flow-col items-center mb-4">602 <p>Proration Granularity:</p>603 <Select604 onChange={(value) => {605 setProrationGranularity(value);606 }}607 value={prorationGranularity}608 >609 {generateValidProrationGranularity().map(610 (granularity) => (611 <Option value={granularity}>{granularity}</Option>612 )613 )}614 <Option value="total">none</Option>615 </Select>616 </div>617 {prorationGranularity === "total" && (618 <p className=" text-darkgold mb-4">619 Proration will not be applied to this component.620 </p>621 )}622 </Fragment>623 )}
624 </Panel>
625 </Collapse>
Description
JSX Fragments can be written in two ways:
<React.Fragment> ... </React.Fragment>: Fragment component.<> ... </>: Syntactic sugar.
DeepSource recommends using the shorthand syntax over its alternative. This makes the code more concise and easier to read.
Bad Practice
<React.Fragment><Foo /></React.Fragment>
Recommended
<><Foo /></>