aboutsummaryrefslogtreecommitdiff
path: root/modern/src/form/SelectField.js
diff options
context:
space:
mode:
Diffstat (limited to 'modern/src/form/SelectField.js')
-rw-r--r--modern/src/form/SelectField.js35
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;