Found unnecessary fragments JS-0424
Fragments should contain more than one child - otherwise, there’s no need for a Fragment at all
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
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
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
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//)
Description
Fragments are a syntax that allow you to build a react component with multiple nodes or subcomponents, without requiring a wrapper element.
A fragment is considered to be redundant if:
- it contains only one child,
- it is the child of a html element,
- it is not a keyed fragment.
Removing the fragments can fix this issue.
Bad Practice
// Example 1
<>{foo}</>
// Example 2
<><Foo /></>
// Example 3
<p><>foo</></p>
// Example 4
<></>
// Example 5
<Fragment>foo</Fragment>
// Example 6
<React.Fragment>foo</React.Fragment>
// Example 7
<section>
<>
<div />
<div />
</>
</section>
Recommended
// Example 1
<>
<Foo />
<Bar />
</>
// Example 2
<>foo {bar}</>
// Example 3
<> {foo}</>
// Example 4
const cat = <>meow</>
// Example 5
<SomeComponent>
<>
<div />
<div />
</>
</SomeComponent>
// Example 6
<Fragment key={item.id}>{item.value}</Fragment>