diff --git a/src/client/app/components/unit/CreateUnitModalComponent.tsx b/src/client/app/components/unit/CreateUnitModalComponent.tsx
index 57c265dad..66c149093 100644
--- a/src/client/app/components/unit/CreateUnitModalComponent.tsx
+++ b/src/client/app/components/unit/CreateUnitModalComponent.tsx
@@ -76,6 +76,10 @@ export default function CreateUnitModalComponent() {
 		setState({ ...state, [e.target.name]: JSON.parse(e.target.value) });
 	};
 
+	const handleNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		setState({ ...state, [e.target.name]: Number(e.target.value) });
+	};
+
 	/**
 	 * Updates the rate (both custom and regular state) including setting if custom.
 	 * @param newRate The new rate to set.
@@ -129,9 +133,6 @@ export default function CreateUnitModalComponent() {
 
 	// Keeps canSave state up to date. Checks if valid and if edit made.
 	useEffect(() => {
-		setValidUnit(state.name !== '' && state.secInRate > 0 &&
-			(state.typeOfUnit !== UnitType.suffix || state.suffix !== '') && (state?.minVal < MIN_VAL || state?.minVal > state?.maxVal));
-	}, [state.name, state.secInRate, state.typeOfUnit, state.suffix]);
 
 		// This checks:
 		// - Name cannot be blank
@@ -140,6 +141,7 @@ export default function CreateUnitModalComponent() {
 		// - The custom rate is a positive integer
 		const validUnit = state.name !== '' &&
 			(state.typeOfUnit !== UnitType.suffix || state.suffix !== '') && state.secInRate !== Number(CUSTOM_INPUT)
+			&& (state?.minVal < MIN_VAL || state?.minVal > state?.maxVal)
 			&& customRateValid(Number(state.secInRate));
 		setCanSave(validUnit);
 	}, [state]);
@@ -431,59 +433,59 @@ export default function CreateUnitModalComponent() {
 								</FormGroup>
 							</Col>
 						</Row>
-					<Row xs='1' lg='2'>
-						{/* minVal input */}
-						<Col><FormGroup>
-							<Label for='minVal'>{translate('min.val')}</Label>
-							<Input id='minVal' name='minVal' type='number'
-								onChange={e => handleNumberChange(e)}
-								min={MIN_VAL}
-								max={state.maxVal}
-								defaultValue={state.minVal}
-								invalid={state?.minVal < MIN_VAL || state?.minVal > state?.maxVal} />
-							<FormFeedback>
-								<FormattedMessage id="error.bounds" values={{ min: MIN_VAL, max: state.maxVal }} />
-							</FormFeedback>
-						</FormGroup></Col>
-						{/* maxVal input */}
-						<Col><FormGroup>
-							<Label for='maxVal'>{translate('max.value')}</Label>
-							<Input id='maxVal' name='maxVal' type='number'
-								onChange={e => handleNumberChange(e)}
-								min={state.minVal}
-								max={MAX_VAL}
-								defaultValue={state.maxVal}
-								invalid={state?.maxVal > MAX_VAL || state?.minVal > state?.maxVal} />
-							<FormFeedback>
-								<FormattedMessage id="error.bounds" values={{ min: state.minVal, max: MAX_VAL }} />
-							</FormFeedback>
-						</FormGroup></Col>
-					</Row>
-					<Row xs='1' lg='2'>
-						{/* DisableChecks input */}
-						<Col><FormGroup>
-							<Label for='disableChecks'>{translate('disable.checks')}</Label>
-							<Input id='disableChecks' name='disableChecks' type='select'
+						<Row xs='1' lg='2'>
+							{/* minVal input */}
+							<Col><FormGroup>
+								<Label for='minVal'>{translate('min.val')}</Label>
+								<Input id='minVal' name='minVal' type='number'
+									onChange={e => handleNumberChange(e)}
+									min={MIN_VAL}
+									max={state.maxVal}
+									defaultValue={state.minVal}
+									invalid={state?.minVal < MIN_VAL || state?.minVal > state?.maxVal} />
+								<FormFeedback>
+									<FormattedMessage id="error.bounds" values={{ min: MIN_VAL, max: state.maxVal }} />
+								</FormFeedback>
+							</FormGroup></Col>
+							{/* maxVal input */}
+							<Col><FormGroup>
+								<Label for='maxVal'>{translate('max.value')}</Label>
+								<Input id='maxVal' name='maxVal' type='number'
+									onChange={e => handleNumberChange(e)}
+									min={state.minVal}
+									max={MAX_VAL}
+									defaultValue={state.maxVal}
+									invalid={state?.maxVal > MAX_VAL || state?.minVal > state?.maxVal} />
+								<FormFeedback>
+									<FormattedMessage id="error.bounds" values={{ min: state.minVal, max: MAX_VAL }} />
+								</FormFeedback>
+							</FormGroup></Col>
+						</Row>
+						<Row xs='1' lg='2'>
+							{/* DisableChecks input */}
+							<Col><FormGroup>
+								<Label for='disableChecks'>{translate('disable.checks')}</Label>
+								<Input id='disableChecks' name='disableChecks' type='select'
+									onChange={e => handleStringChange(e)}
+									defaultValue={state.disableChecks}>
+									{Object.keys(DisableChecksType).map(key => {
+										return (<option value={key} key={key} >
+											{translate(`DisableChecksType.${key}`)}</option>);
+									})}
+								</Input>
+							</FormGroup></Col>
+						</Row>
+						{/* Note input */}
+						<FormGroup>
+							<Label for='note'>{translate('note')}</Label>
+							<Input
+								id='note'
+								name='note'
+								type='textarea'
 								onChange={e => handleStringChange(e)}
-								defaultValue={state.disableChecks}>
-								{Object.keys(DisableChecksType).map(key => {
-									return (<option value={key} key={key} >
-										{translate(`DisableChecksType.${key}`)}</option>);
-								})}
-							</Input>
-						</FormGroup></Col>
-					</Row>
-					{/* Note input */}
-					<FormGroup>
-						<Label for='note'>{translate('note')}</Label>
-						<Input
-							id='note'
-							name='note'
-							type='textarea'
-							onChange={e => handleStringChange(e)}
-							value={state.note} />
-					</FormGroup>
-				</Container></ModalBody>
+								value={state.note} />
+						</FormGroup>
+					</Container></ModalBody>
 				<ModalFooter>
 					{/* Hides the modal */}
 					<Button color="secondary" onClick={handleClose}>
diff --git a/src/client/app/components/unit/EditUnitModalComponent.tsx b/src/client/app/components/unit/EditUnitModalComponent.tsx
index 99535d2ec..f504e01d9 100644
--- a/src/client/app/components/unit/EditUnitModalComponent.tsx
+++ b/src/client/app/components/unit/EditUnitModalComponent.tsx
@@ -21,7 +21,7 @@ import { conversionArrow } from '../../utils/conversionArrow';
 import { showErrorNotification, showSuccessNotification } from '../../utils/notifications';
 import ConfirmActionModalComponent from '../ConfirmActionModalComponent';
 import TooltipMarkerComponent from '../TooltipMarkerComponent';
-import { MAX_VAL,  MIN_VAL } from '../../redux/selectors/adminSelectors';
+import { MAX_VAL, MIN_VAL } from '../../redux/selectors/adminSelectors';
 import { LineGraphRates } from '../../types/redux/graph';
 import { customRateValid, isCustomRate } from '../../utils/unitInput';
 
@@ -78,6 +78,10 @@ export default function EditUnitModalComponent(props: EditUnitModalComponentProp
 		setState({ ...state, [e.target.name]: JSON.parse(e.target.value) });
 	};
 
+	const handleNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		setState({ ...state, [e.target.name]: Number(e.target.value) });
+	};
+
 	/**
 	 * Updates the rate (both custom and regular state) including setting if custom.
 	 * @param newRate The new rate to set.
@@ -211,10 +215,10 @@ export default function EditUnitModalComponent(props: EditUnitModalComponentProp
 			|| props.unit.preferredDisplay !== state.preferredDisplay
 			|| props.unit.secInRate !== state.secInRate
 			|| props.unit.suffix !== state.suffix
-			|| props.unit.note !== state.note;
-      || props.unit.minVal != state.minVal
-      || props.unit.maxVal != state.maxVal
-      || props.unit.disableChecks != state.disableChecks;
+			|| props.unit.note !== state.note
+			|| props.unit.minVal != state.minVal
+			|| props.unit.maxVal != state.maxVal
+			|| props.unit.disableChecks != state.disableChecks;
 		setCanSave(validUnit && editMade);
 	}, [state]);
 
@@ -558,59 +562,59 @@ export default function EditUnitModalComponent(props: EditUnitModalComponentProp
 								</FormGroup>
 							</Col>
 						</Row>
-					<Row xs='1' lg='2'>
-						{/* minVal input */}
-						<Col><FormGroup>
-							<Label for='minVal'>{translate('min.value')}</Label>
-							<Input id='minVal' name='minVal' type='number'
-								onChange={e => handleNumberChange(e)}
-								min={MIN_VAL}
-								max={state.maxVal}
-								required value={state.minVal}
-								invalid={state?.minVal < MIN_VAL || state?.minVal > state?.maxVal} />
-							<FormFeedback>
-								<FormattedMessage id="error.bounds" values={{ min: MIN_VAL, max: state.maxVal }} />
-							</FormFeedback>
-						</FormGroup></Col>
-						{/* maxVal input */}
-						<Col><FormGroup>
-							<Label for='maxVal'>{translate('max.value')}</Label>
-							<Input id='maxVal' name='maxVal' type='number'
-								onChange={e => handleNumberChange(e)}
-								min={state.minVal}
-								max={MAX_VAL}
-								required value={state.maxVal}
-								invalid={state?.maxVal > MAX_VAL || state?.minVal > state?.maxVal} />
-							<FormFeedback>
-								<FormattedMessage id="error.bounds" values={{ min: state.minVal, max: MAX_VAL }} />
-							</FormFeedback>
-						</FormGroup></Col>
-					</Row>
-					<Row xs='1' lg='2'>
-						{/* DisableChecks input */}
-						<Col><FormGroup>
-							<Label for='disableChecks'>{translate('disable.checks')}</Label>
-							<Input id='disableChecks' name='disableChecks' type='select'
-								onChange={e => handleStringChange(e)}
-								value={state.disableChecks}>
-								{Object.keys(DisableChecksType).map(key => {
-									return (<option value={key} key={key} >
-										{translate(`DisableChecksType.${key}`)}</option>);
-								})}
-							</Input>
-						</FormGroup></Col>
-					</Row>
-					{/* Note input */}
-					<FormGroup>
-						<Label for='note'>{translate('unit')}</Label>
-						<Input
-							id='note'
-							name='note'
-							type='textarea'
-							value={state.note}
-							onChange={e => handleStringChange(e)} />
-					</FormGroup>
-				</Container></ModalBody>
+						<Row xs='1' lg='2'>
+							{/* minVal input */}
+							<Col><FormGroup>
+								<Label for='minVal'>{translate('min.value')}</Label>
+								<Input id='minVal' name='minVal' type='number'
+									onChange={e => handleNumberChange(e)}
+									min={MIN_VAL}
+									max={state.maxVal}
+									required value={state.minVal}
+									invalid={state?.minVal < MIN_VAL || state?.minVal > state?.maxVal} />
+								<FormFeedback>
+									<FormattedMessage id="error.bounds" values={{ min: MIN_VAL, max: state.maxVal }} />
+								</FormFeedback>
+							</FormGroup></Col>
+							{/* maxVal input */}
+							<Col><FormGroup>
+								<Label for='maxVal'>{translate('max.value')}</Label>
+								<Input id='maxVal' name='maxVal' type='number'
+									onChange={e => handleNumberChange(e)}
+									min={state.minVal}
+									max={MAX_VAL}
+									required value={state.maxVal}
+									invalid={state?.maxVal > MAX_VAL || state?.minVal > state?.maxVal} />
+								<FormFeedback>
+									<FormattedMessage id="error.bounds" values={{ min: state.minVal, max: MAX_VAL }} />
+								</FormFeedback>
+							</FormGroup></Col>
+						</Row>
+						<Row xs='1' lg='2'>
+							{/* DisableChecks input */}
+							<Col><FormGroup>
+								<Label for='disableChecks'>{translate('disable.checks')}</Label>
+								<Input id='disableChecks' name='disableChecks' type='select'
+									onChange={e => handleStringChange(e)}
+									value={state.disableChecks}>
+									{Object.keys(DisableChecksType).map(key => {
+										return (<option value={key} key={key} >
+											{translate(`DisableChecksType.${key}`)}</option>);
+									})}
+								</Input>
+							</FormGroup></Col>
+						</Row>
+						{/* Note input */}
+						<FormGroup>
+							<Label for='note'>{translate('unit')}</Label>
+							<Input
+								id='note'
+								name='note'
+								type='textarea'
+								value={state.note}
+								onChange={e => handleStringChange(e)} />
+						</FormGroup>
+					</Container></ModalBody>
 				<ModalFooter>
 					<Button variant="warning" color='danger' onClick={handleDeleteConfirmationModalOpen}>
 						<FormattedMessage id="unit.delete.unit" />