Baseline Parts Order modal functioning.

client/src/components/parts-order-modal/parts-order-modal.component.jsx

@@ -1,9 +1,11 @@
 import React, { useState } from "react";
 import { AutoComplete, Icon } from "antd";
 import { useTranslation } from "react-i18next";
-export default function PartsOrderModalComponent({ vendorList }) {
+export default function PartsOrderModalComponent({ vendorList, state }) {
+  const [partsOrder, setPartsOrder] = state;
   const [vendorComplete, setVendorComplete] = useState(vendorList);
   const { t } = useTranslation();
+
   const handleSearch = value => {
     if (value === "") setVendorComplete(vendorList);
     else
@@ -14,15 +16,25 @@ export default function PartsOrderModalComponent({ vendorList }) {
       );
   };
 
+  const handleSelect = (value, option) => {
+    console.log("option", option);
+    setPartsOrder({ ...partsOrder, vendorid: value });
+  };
+
   return (
     <div>
+    TODO Not sure why name is not populating. 
       <AutoComplete
         onSearch={handleSearch}
+        onSelect={handleSelect}
+        optionLabelProp='id'
+        backfill
+        dataSource={vendorComplete}
         placeholder={t("vendors.labels.search")}>
         {vendorComplete.map(v => (
           <AutoComplete.Option key={v.id}>
-            {v.name}
-            {v.favorite ? <Icon type='heart' /> : null}
+            <div>{v.name}</div>
+            <div> {v.favorite ? <Icon type='heart' /> : null}</div>
           </AutoComplete.Option>
         ))}
       </AutoComplete>