categoryId: Number()

in dotcom-rendering/src/components/Discussion/AbuseReportForm.tsx [243:362]
114 lines of code
8 McCabe index (conditional complexity)

								categoryId: Number(e.target.value),
							});

							errors.categoryId = '';
							setErrors(errors);
						}}
						value={formVariables.categoryId}
						theme={{
							textLabel: labelColour,
							textOptional: labelColour,
							textError: errorColour,
							borderError: errorColour,
						}}
						error={
							errors.categoryId ? errors.categoryId : undefined
						}
					>
						<Option value="0">Please select</Option>
						<Option value="1">Personal abuse</Option>
						<Option value="2">Off topic</Option>
						<Option value={legalIssueCategoryId}>
							Legal issue
						</Option>
						<Option value="4">Trolling</Option>
						<Option value="5">Hate speech</Option>
						<Option value="6">
							Offensive/Threatening language
						</Option>
						<Option value="7">Copyright</Option>
						<Option value="8">Spam</Option>
						<Option value={otherCategoryId}>Other</Option>
					</Select>
				</div>

				<div
					css={[
						inputWrapper,
						svgStyles,
						errorSvgStyles,
						errors.reason ? errorBorderColour : borderColour,
					]}
				>
					<TextArea
						id="reason"
						size={'medium'}
						label={'Reason'}
						optional={!isReasonRequired}
						onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
							setFormVariables({
								...formVariables,
								reason: e.target.value,
							})
						}
						value={formVariables.reason}
						required={isReasonRequired}
						theme={{
							textLabel: labelColour,
							textOptional: labelColour,
							textError: errorColour,
							borderError: errorColour,
						}}
						error={errors.reason ? errors.reason : undefined}
					/>
				</div>

				<div
					css={[
						inputWrapper,
						svgStyles,
						errorSvgStyles,
						errors.email ? errorBorderColour : borderColour,
					]}
				>
					<TextInput
						label={'Email'}
						optional={true}
						id="email"
						type="email"
						onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
							setFormVariables({
								...formVariables,
								email: e.target.value,
							})
						}
						value={formVariables.email}
						theme={{
							textLabel: labelColour,
							textOptional: labelColour,
							textError: errorColour,
							borderError: errorColour,
						}}
						error={errors.email ? errors.email : undefined}
					/>
				</div>

				<div>
					<Button
						type="submit"
						size="small"
						data-link-name="Post report abuse"
						cssOverrides={buttonStyles}
					>
						Report
					</Button>

					{!!errors.response && (
						<InlineError
							cssOverrides={css`
								color: ${errorColour};
								padding-top: ${space[2]}px;
							`}
						>
							{errors.response}
						</InlineError>
					)}

					{!!successMessage && (
						<InlineSuccess
							cssOverrides={css`
								color: ${schemedPalette(