[#40] Fix translation for multiple option

akvo · Apr 28, 2022 · 76cabee · 76cabee
1 parent 6165e1a
commit 76cabee
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/example/src/example.json b/example/src/example.json
@@ -134,7 +134,7 @@
           "order": 5,
           "type": "cascade",
           "api": {
-            "endpoint": "https://tech-consultancy.akvo.org/akvo-flow-web-api/cascade/seap/cascade-296940912-v1.sqlite/",
+            "endpoint": "https://tech-consultancy.akvo.org/akvo-flow-web-api/cascade/seap/cascade-296940912-v1.sqlite",
             "initial": 0,
             "list": false
           },

diff --git a/src/fields/TypeMultipleOption.jsx b/src/fields/TypeMultipleOption.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { Divider, Form, Select, Input, Button } from 'antd'
 import { PlusOutlined } from '@ant-design/icons'
 import { Extra } from '../support'
@@ -15,10 +15,11 @@ const TypeMultipleOption = ({
   allowOtherText,
   extra
 }) => {
-  const [options, setOptions] = useState(option)
+  const [options, setOptions] = useState([])
   const [newOption, setNewOption] = useState('')
+  const [extraOption, setExtraOption] = useState([])
   const addNewOption = (e) => {
-    setOptions([...options, { name: newOption, label: newOption }])
+    setExtraOption([...extraOption, { name: newOption, label: newOption }])
     e.preventDefault()
     setNewOption('')
   }
@@ -29,6 +30,11 @@ const TypeMultipleOption = ({
     ? extra.filter((ex) => ex.placement === 'before')
     : []
   const extraAfter = extra ? extra.filter((ex) => ex.placement === 'after') : []
+
+  useEffect(() => {
+    setOptions([...option, ...extraOption])
+  }, [option, extraOption])
+
   return (
     <Form.Item
       className='arf-field'