Abstracts away the input select

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)}
           />
-
+          <InputSelect
-          <label>Type: </label>
+            label="Type"
-          <select
             value={type}
             name="type"
-            onChange={(e) => setType(e.target.value)}
+            onChangeEvent={(e) => setType(e.target.value)}
-          >
+            options={[
-            <option value="1">Sedan</option>
+              { value: "1", text: "Sedan" },
-            <option value="2">SUV</option>
+              { value: "2", text: "SUV" },
-            <option value="3">Pickup</option>
+              { value: "3", text: "Pickup" },
-          </select>
+            ]}
+          />
         </div>
-
         <Button text="Register" onClickEvent={registerVehicle} />
       </form>
     </Card>

React/src/pages/components/inputs/InputSelect.js

@@ -1,7 +1,18 @@
 import React from "react";
 
-const InputSelect = () => {
+const InputSelect = ({ label, value, name, onChangeEvent, options }) => {
-  return <div></div>;
+  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;