From aa65ab869b9201a8bb61ba71ef128558c5346a6a Mon Sep 17 00:00:00 2001
From: Rakhee <srakhee@deloitte.com>
Date: Sat, 27 Nov 2021 09:21:58 +0530
Subject: [PATCH 1/2] Restricted negative height and weight in user input

---
 src/components/BmiForm/BmiForm.jsx | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/components/BmiForm/BmiForm.jsx b/src/components/BmiForm/BmiForm.jsx
index 26469906..cda2d488 100644
--- a/src/components/BmiForm/BmiForm.jsx
+++ b/src/components/BmiForm/BmiForm.jsx
@@ -5,9 +5,11 @@ import '../App/App.css';
 const initialValues = {
 	weight: '',
 	height: '',
-	date: ''
+	date: '',
 }
 
+const restrictKeyList = ['-', '+'];
+
 const BmiForm = ({ change }) => {
 	const [state, setState] = useState(initialValues);
 
@@ -24,6 +26,11 @@ const BmiForm = ({ change }) => {
 		});
 	};
 
+	const filterInput = (e, restrictKeyList) => {
+		let isValidInput = restrictKeyList.some((key) => e.key === key);
+		if (isValidInput) e.preventDefault();
+	};
+
 	const handleSubmit = () => {
 		change(state);
 		setState(initialValues);
@@ -35,14 +42,15 @@ const BmiForm = ({ change }) => {
 				<div className="col m6 s12">
 					<label htmlFor="weight">Weight (in kg)</label>
 					<input
-						id="weight"
+						id="number1"
 						name="weight"
 						type="number"
-						min="1"
-						max="999"
+						max={999}
+						min={1}
 						placeholder="50"
 						value={state.weight}
-						onChange={handleChange}
+						onChange={(e) => handleChange(e)}
+						onKeyDown={(e) => filterInput(e, restrictKeyList)}
 					/>
 				</div>
 
@@ -57,6 +65,7 @@ const BmiForm = ({ change }) => {
 						placeholder="176"
 						value={state.height}
 						onChange={handleChange}
+						onKeyDown={(e) => filterInput(e, restrictKeyList)}
 					/>
 				</div>
 			</div>
@@ -76,7 +85,7 @@ const BmiForm = ({ change }) => {
 };
 
 BmiForm.propTypes = {
-	change: PropTypes.func.isRequired
+	change: PropTypes.func.isRequired,
 };
 
 export default BmiForm;

From 43214fe8e2fd897a5f4c022566b92349d641c9c6 Mon Sep 17 00:00:00 2001
From: Rakhee <srakhee@deloitte.com>
Date: Sat, 27 Nov 2021 09:25:40 +0530
Subject: [PATCH 2/2] format issue

---
 src/components/BmiForm/BmiForm.jsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/BmiForm/BmiForm.jsx b/src/components/BmiForm/BmiForm.jsx
index cda2d488..0e95a754 100644
--- a/src/components/BmiForm/BmiForm.jsx
+++ b/src/components/BmiForm/BmiForm.jsx
@@ -5,9 +5,8 @@ import '../App/App.css';
 const initialValues = {
 	weight: '',
 	height: '',
-	date: '',
+	date: ''
 }
-
 const restrictKeyList = ['-', '+'];
 
 const BmiForm = ({ change }) => {
@@ -42,11 +41,11 @@ const BmiForm = ({ change }) => {
 				<div className="col m6 s12">
 					<label htmlFor="weight">Weight (in kg)</label>
 					<input
-						id="number1"
+						id="weight"
 						name="weight"
 						type="number"
-						max={999}
-						min={1}
+						max="999"
+						min="1"
 						placeholder="50"
 						value={state.weight}
 						onChange={(e) => handleChange(e)}