DeepSource
Dashboard Resources Pricing Discover Directory Log in

Run your first analysis.

Find thousands of code security and quality issues in your codebase, before they end up in production.

Start now

weareinreach / InReach

Found unnecessary fragments JS-0424
Anti-pattern
Major
3 days ago — a year old
react
Fragments should contain more than one child - otherwise, there’s no need for a Fragment at all
packages/ui/components/core/GoogleMap.tsx
 73					return <MapRenderer {...{ height, width }} />
 74				}
 75				default: {
 76					return <></> 77				}
 78			}
 79		},
Fragments should contain more than one child - otherwise, there’s no need for a Fragment at all
packages/ui/components/core/GoogleMap.tsx
 67					return <Skeleton h={height} w={width} radius={16} />
 68				}
 69				case Status.FAILURE: {
 70					return <></> 71				}
 72				case Status.SUCCESS: {
 73					return <MapRenderer {...{ height, width }} />
Fragments should contain more than one child - otherwise, there’s no need for a Fragment at all
packages/ui/components/sections/CrisisSupport/index.tsx
42				</Stack>
43			</>
44		) : (
45			<>46				<Stack spacing={16}>47					<Badge.Service hideTooltip className={classes.categoryBadge}>48						{t('crisis-support.CATEGORYNAME')}49					</Badge.Service>50					<Title order={2}>{t('common:crisis-support.natl-find-help-now')}</Title>51					<Trans i18nKey='common:crisis-support.natl-these-verified' components={{ Text: <Text></Text> }} />52				</Stack>53			</>54		)
55
56	return (
Fragments should contain more than one child - otherwise, there’s no need for a Fragment at all
packages/ui/components/data-portal/MultiSelectPopover/index.tsx
 60	}, [currentValues, value])
 61
 62	return (
 63		<> 64			<Popover 65				opened={opened} 66				onClose={() => { 67					menuHandler.close() 68					handleChange() 69				}} 70				trapFocus 71				withinPortal 72			> 73				<LoadingOverlay visible={data === undefined} /> 74				<Popover.Target> 75					<UnstyledButton 76						onClick={menuHandler.toggle} 77						className={classes.button} 78						style={style} 79						w={fullWidth ? '100%' : undefined} 80					> 81						<Group noWrap position='apart' spacing={16}> 82							<Group noWrap spacing={8}> 83								{selectedCountIcon} 84								<Text style={{ display: 'inline-block' }} className={labelClassName}> 85									{label} 86								</Text> 87							</Group> 88							<Icon icon={opened ? 'carbon:chevron-up' : 'carbon:chevron-down'} height={24} /> 89						</Group> 90					</UnstyledButton> 91				</Popover.Target> 92				<Popover.Dropdown> 93					<ScrollArea.Autosize 94						mah={250} 95						placeholder={null} 96						// TODO: Typescript wants these two properties all of a sudden -- why? 97						onPointerEnterCapture={undefined} 98						onPointerLeaveCapture={undefined} 99					>100						{items.map((props, index) => (101							<Checkbox102								key={props.value}103								{...props}104								onChange={(e) => itemHandlers.setItemProp(index, 'checked', e.currentTarget.checked)}105							/>106						))}107					</ScrollArea.Autosize>108				</Popover.Dropdown>109			</Popover>110		</>111	)
112}
113//)
Fragments should contain more than one child - otherwise, there’s no need for a Fragment at all
packages/ui/components/data-portal/MultiSelectPopover/hook-form.tsx
 53	const selectedCountIcon = <Text className={classes.count}>{selected}</Text>
 54
 55	return (
 56		<> 57			<Popover 58				opened={opened} 59				onClose={() => { 60					menuHandler.close() 61				}} 62				trapFocus 63				withinPortal 64			> 65				<LoadingOverlay visible={data === undefined} /> 66				<Popover.Target> 67					<UnstyledButton 68						onClick={menuHandler.toggle} 69						className={cx({ [classes.button]: true, [classes.indicateDirty]: indicateWhenDirty })} 70						style={style} 71						w={fullWidth ? '100%' : undefined} 72						data-isDirty={fieldState.isDirty} 73					> 74						<Group noWrap position='apart' spacing={16}> 75							<Group noWrap spacing={8}> 76								{selectedCountIcon} 77								<Text style={{ display: 'inline-block' }} className={labelClassName}> 78									{label} 79								</Text> 80							</Group> 81							<Icon icon={opened ? 'carbon:chevron-up' : 'carbon:chevron-down'} height={24} /> 82						</Group> 83					</UnstyledButton> 84				</Popover.Target> 85				<Popover.Dropdown> 86					<ScrollArea.Autosize 87						mah={250} 88						placeholder={null} 89						// TODO: Typescript wants these two properties all of a sudden -- why? 90						onPointerEnterCapture={undefined} 91						onPointerLeaveCapture={undefined} 92					> 93						<Checkbox.Group 94							error={fieldState.error?.message} 95							value={value} 96							label={label} 97							onChange={(e) => { 98								fieldOnChange(e) 99								onChange?.(e)100							}}101							{...field}102						>103							{data?.map((props, index) => <Checkbox key={props.value} {...props} />)}104						</Checkbox.Group>105					</ScrollArea.Autosize>106				</Popover.Dropdown>107			</Popover>108		</>109	)
110}
111//)