Implement common select field component

1 files changed, 35 insertions, 0 deletions

diff --git a/modern/src/form/SelectField.js b/modern/src/form/SelectField.js
new file mode 100644
index 0000000..78a1688
--- /dev/null
+++ b/modern/src/form/SelectField.js
@@ -0,0 +1,35 @@
+import { FormControl, InputLabel, Select } from '@material-ui/core';
+import React, { useState } from 'react';
+import { useEffectAsync } from '../reactHelper';
+
+const SelectField = ({ margin, variant, label, defaultValue, onChange, endpoint }) => {
+  const [items, setItems] = useState();
+
+  useEffectAsync(async () => {
+    const response = await fetch(endpoint);
+    if (response.ok) {
+      setItems(await response.json());
+    }
+  }, []);
+
+  if (items) {
+    return (
+      <FormControl margin={margin} variant={variant}>
+        <InputLabel>{label}</InputLabel>
+        <Select
+          native
+          defaultValue={defaultValue}
+          onChange={onChange}>
+          <option value={0}></option>
+          {items.map(item => (
+            <option key={item.id} value={item.id}>{item.name}</option>
+          ))}
+        </Select>
+      </FormControl>
+    );
+  } else {
+    return null;
+  }
+}
+
+export default SelectField;