weareinreach / InReach

Avoid .bind() or local functions in JSX properties JS-0417
Performance
Major
58 occurrences in this check
JSX props should not use arrow functions
235				title={modalTitle}
236				scrollAreaComponent={Modal.NativeScrollArea}
237				opened={opened}
238				onClose={() => setOpened(false)}239				fullScreen={isMobile}
240				zIndex={500}
241			>
JSX props should not use arrow functions
216			<Button variant={variants.Button.primaryLg} fullWidth onClick={() => router.push('/')}>
217				{t('find-x', { value: '$t(resources, lowercase)' })}
218			</Button>
219			<Button variant={variants.Button.primaryLg} fullWidth onClick={() => router.push('/profile')}>220				{t('go-to-x', { value: '$t(profile, lowercase)' })}
221			</Button>
222		</>
JSX props should not use arrow functions
213		<>
214			<Title order={1}></Title>
215			<Title order={2}>{t('sign-up-success')}</Title>
216			<Button variant={variants.Button.primaryLg} fullWidth onClick={() => router.push('/')}>217				{t('find-x', { value: '$t(resources, lowercase)' })}
218			</Button>
219			<Button variant={variants.Button.primaryLg} fullWidth onClick={() => router.push('/profile')}>
JSX props should not use arrow functions
 56				button: (
 57					<Button
 58						variant='secondary-icon'
 59						onClick={ 60							stateSetter ? (e) => stateSetter(e.currentTarget.getAttribute('data-option')) : undefined 61						} 62					>
 63						.
 64					</Button>
JSX props should not use arrow functions
125
126	const signUpButton = (
127		<>
128			<Button disabled={!form.isValid()} onClick={submitHandler} loading={signUpAction.isLoading}>129				{t('sign-up')}
130			</Button>
131			<Text variant={variants.Text.utility4darkGray}>
JSX props should not use arrow functions
248			<Box
249				component='button'
250				ref={ref}
251				onClick={() => {252					setOpened(true)253				}}254				{...props}
255			/>
256		</>
JSX props should not use arrow functions
248			classNames={{ itemsWrapper: classes.autocompleteWrapper }}
249			data={form.values.locationOptions}
250			label={t('current-location')}
251			onItemSubmit={(e) => {252				console.log(e)253				setLocationSearch(e.placeId)254			}}255			{...form.getInputProps('searchLocation')}
256		/>
257	)
JSX props should not use arrow functions
174					placeholder={t('enter-password-placeholder') as string}
175					{...form.getInputProps('password')}
176					onFocusCapture={() => setPwPopover(true)}
177					onBlurCapture={() => setPwPopover(false)}178				/>
179			</Popover.Target>
180			<Popover.Dropdown>
JSX props should not use arrow functions
173					label={t('password')}
174					placeholder={t('enter-password-placeholder') as string}
175					{...form.getInputProps('password')}
176					onFocusCapture={() => setPwPopover(true)}177					onBlurCapture={() => setPwPopover(false)}
178				/>
179			</Popover.Target>
JSX props should not use arrow functions
348					>
349						{t('uncheck-all')}
350					</Button>
351					<Button variant='primary' className={classes.resultsBtn} onClick={() => setOpened(false)}>352						{t('view-x-result', { count: resultCount })}
353					</Button>
354				</Group>
JSX props should not use arrow functions
354				</Group>
355			</Modal>
356
357			<UnstyledButton onClick={() => setOpened(true)} w='100%'>358				<ServiceBar />
359			</UnstyledButton>
360		</>
JSX props should not use arrow functions
259						indeterminate={indeterminate}
260						label={t('all-service-category', { serviceCategory: `$t(services:${tsKey})` })}
261						transitionDuration={0}
262						onChange={() => toggleCategory(categoryId)}263						className={classes.itemParent}
264					/>
265
JSX props should not use arrow functions
304				{modalTitle ? (
305					<Text
306						fw={500}
307						onClick={() => deselectAll()}308						className={selectedItems.length > 0 ? classes.uncheck : classes.uncheckDisabled}
309					>
310						{t('uncheck-all')}
JSX props should not use arrow functions
320		<>
321			<Modal
322				opened={opened}
323				onClose={() => setOpened(false)}324				title={<ServiceBar modalTitle />}
325				fullScreen={isMobile}
326				classNames={modalClasses}
JSX props should not use arrow functions
342				<Group className={modalClasses.footer} noWrap>
343					<Button
344						variant='secondary'
345						onClick={() => deselectAll()}346						disabled={selectedItems.length < 1}
347						className={classes.uncheckBtn}
348					>
JSX props should not use arrow functions
402
403			return (
404				<>
405					<Modal title={<ServiceModalTitle />} opened={opened} onClose={() => handler.close()}>406						<Stack spacing={24}>
407							{atCapacity}
408							{name}
JSX props should not use arrow functions
416							<SectionDivider title='transit-directions'>{publicTransit}</SectionDivider>
417						</Stack>
418					</Modal>
419					<Box component='button' ref={ref} onClick={() => handler.open()} {...props} />420				</>
421			)
422		}
JSX props should not use arrow functions
34					}}
35				/>
36			</Stack>
37			<Button onClick={() => openLoginModal()} variant='primary-icon' fullWidth>38				{t('log-in')}
39			</Button>
40			<SignupModalLauncher component={Link}>{t('dont-have-account')}</SignupModalLauncher>
JSX props should not use arrow functions
73					/>
74				</Stack>
75			</Modal>
76			<Box component='button' ref={ref} onClick={() => handler.open()} {...props} />77		</>
78	)
79})
JSX props should not use arrow functions
26
27	return (
28		<>
29			<Modal title={modalTitle} opened={opened} onClose={() => handler.close()}>30				<Stack align='center' spacing={16}>
31					<Trans
32						i18nKey='privacy-statement-body'
JSX props should not use arrow functions
348				</Group>
349			</Modal>
350
351			<Box ref={ref} component={DefaultLauncher} onClick={() => setOpened(true)} {...props} />352		</>
353	)
354})
JSX props should not use arrow functions
348				</Group>
349			</Modal>
350
351			<Box ref={ref} component={DefaultLauncher} onClick={() => setOpened(true)} {...props} />352		</>
353	)
354})
JSX props should not use arrow functions
336				<Group className={modalClasses.footer} noWrap>
337					<Button
338						variant='secondary'
339						onClick={() => deselectAll()}340						disabled={selectedItems.length < 1}
341						className={classes.uncheckBtn}
342					>
JSX props should not use arrow functions
342					>
343						{t('uncheck-all')}
344					</Button>
345					<Button variant='primary' className={classes.resultsBtn} onClick={() => setOpened(false)}>346						{t('view-x-result', { count: resultCount })}
347					</Button>
348				</Group>
JSX props should not use arrow functions
312		<>
313			<Modal
314				opened={opened}
315				onClose={() => setOpened(false)}316				title={<TitleBar modalTitle />}
317				fullScreen={isMobile}
318				classNames={modalClasses}