From 23d40dfada48b655f525cd66f5de34b9fe3d9ad6 Mon Sep 17 00:00:00 2001
From: Vazhin Tayeb <vazhintayeb@gmail.com>
Date: Fri, 15 Jan 2021 14:41:39 +0300
Subject: [PATCH] Abstracts away the input select

---
 .../pages/components/VehicleRegisterForm.js   | 20 +++++++++----------
 .../pages/components/inputs/InputSelect.js    | 15 ++++++++++++--
 2 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/React/src/pages/components/VehicleRegisterForm.js b/React/src/pages/components/VehicleRegisterForm.js
index 16c0168..10f548c 100644
--- a/React/src/pages/components/VehicleRegisterForm.js
+++ b/React/src/pages/components/VehicleRegisterForm.js
@@ -9,6 +9,7 @@ import Card from "./Card";
 import Heading3 from "./Heading3";
 import Button from "./Button";
 import InputText from "./inputs/InputText";
+import InputSelect from "./inputs/InputSelect";
 
 const VehicleRegisterForm = () => {
   const [model, setModel] = useState("");
@@ -50,19 +51,18 @@ const VehicleRegisterForm = () => {
             name="color"
             onChangeEvent={(e) => setColor(e.target.value)}
           />
-
-          <label>Type: </label>
-          <select
+          <InputSelect
+            label="Type"
             value={type}
             name="type"
-            onChange={(e) => setType(e.target.value)}
-          >
-            <option value="1">Sedan</option>
-            <option value="2">SUV</option>
-            <option value="3">Pickup</option>
-          </select>
+            onChangeEvent={(e) => setType(e.target.value)}
+            options={[
+              { value: "1", text: "Sedan" },
+              { value: "2", text: "SUV" },
+              { value: "3", text: "Pickup" },
+            ]}
+          />
         </div>
-
         <Button text="Register" onClickEvent={registerVehicle} />
       </form>
     </Card>
diff --git a/React/src/pages/components/inputs/InputSelect.js b/React/src/pages/components/inputs/InputSelect.js
index 2810ada..c2f26c9 100644
--- a/React/src/pages/components/inputs/InputSelect.js
+++ b/React/src/pages/components/inputs/InputSelect.js
@@ -1,7 +1,18 @@
 import React from "react";
 
-const InputSelect = () => {
-  return <div></div>;
+const InputSelect = ({ label, value, name, onChangeEvent, options }) => {
+  return (
+    <div>
+      <label>{label}</label>
+      <select value={value} name={name} onChange={onChangeEvent}>
+        {options.map((option, i) => (
+          <option key={i} value={option.value}>
+            {option.text}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
 };
 
 export default InputSelect;