public render()

in client/components/mma/paymentUpdate/FieldWrapper.tsx [48:131]
80 lines of code
6 McCabe index (conditional complexity)

	public render(): React.ReactNode {
		const hydratedChildren = React.Children.map(
			this.props.children,
			(child) => {
				return React.cloneElement(child as React.ReactElement, {
					onChange: this.validateField(this.props.onChange),
					onFocus: this.toggleFocus,
					onBlur: this.toggleFocus,
				});
			},
		);

		let borderCss: string;

		if (this.state.error?.message) {
			borderCss = '4px solid ' + error[400];
		} else {
			borderCss = '2px solid ' + palette.neutral[60];
		}

		return (
			<div
				css={{
					width: this.props.width,
					maxWidth: '100%',
					marginBottom: '10px',
					textAlign: 'left',
					':not(:first-of-type)': {
						marginLeft: '20px',
					},
				}}
			>
				<div
					css={
						this.props.cornerHint
							? css`
									display: flex;
									justify-content: space-between;
									align-items: end;
							  `
							: ``
					}
				>
					<div>
						<label
							css={css`
								${textSansBold17};
								color: ${palette.neutral[7]};
							`}
						>
							{this.props.label}
						</label>
						{this.state.error?.message && (
							<InlineError
								cssOverrides={css`
									margin-bottom: -5px;
									margin-top: 3px;
								`}
							>
								{this.state.error.message}
							</InlineError>
						)}
					</div>
					{this.props.cornerHint && this.props.cornerHint}
				</div>

				<div
					css={css`
						border: ${borderCss};
						display: block;
						font-weight: 400;
						margin-top: 3px;
						line-height: 20px;
						padding: 10px;
						width: 100%;
						transition: all 0.2s ease-in-out;
						${this.state.focus && focusHalo};
					`}
				>
					{hydratedChildren}
				</div>
			</div>
		);
	}