add single field option

Author: OlivierJM

example/src/App.tsx

@@ -1,10 +1,19 @@
 import React from 'react'
 
-import { ExampleComponent } from 'react-dynamic-fields'
+import { SingleField } from 'react-dynamic-fields'
 import 'react-dynamic-fields/dist/index.css'
 
 const App = () => {
-  return <ExampleComponent text="Create React Library Example 😄" />
+  const [options, setOptions] = React.useState([''])
+  return (
+    <SingleField
+    //@ts-ignore
+      options={options}
+      //@ts-ignore
+      setOptions={setOptions}
+      label='Types of fruits'
+    />
+  )
 }
 
 export default App

example/tsconfig.json

@@ -2,7 +2,10 @@
   "compilerOptions": {
     "outDir": "dist",
     "module": "esnext",
-    "lib": ["dom", "esnext"],
+    "lib": [
+      "dom",
+      "esnext"
+    ],
     "moduleResolution": "node",
     "jsx": "react",
     "sourceMap": true,
@@ -15,8 +18,21 @@
     "suppressImplicitAnyIndexErrors": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "allowSyntheticDefaultImports": true
+    "allowSyntheticDefaultImports": true,
+    "target": "es5",
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true
   },
-  "include": ["src"],
-  "exclude": ["node_modules", "build"]
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "node_modules",
+    "build"
+  ]
 }

src/SingleField.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react'
+
+interface Props {
+  options: [string]
+  setOptions: (x: any) => {}
+  label: string
+}
+
+export default function SingleField({ options, setOptions, label }: Props) {
+  function handleOptionChange(
+    event: React.ChangeEvent<HTMLInputElement>,
+    index: number
+  ) {
+    const values = options
+    values[index] = event.target.value
+    setOptions([...values])
+  }
+
+  function handleAddOption() {
+    setOptions([...options, ''])
+  }
+
+  function handleRemoveOption(index: number) {
+    const values = options
+    values.splice(index, 1)
+    setOptions([...values])
+  }
+
+  return (
+    <React.Fragment>
+      {options.map((_option, i) => (
+        <div key={i}>
+          <input
+            placeholder={`type your ${label}`}
+            value={options[i]}
+            onChange={(event) => handleOptionChange(event, i)}
+            autoFocus
+          />
+          <button onClick={() => handleRemoveOption(i)}>remove</button>
+        </div>
+      ))}
+      <button onClick={handleAddOption}>{`add ${label}`}</button>
+    </React.Fragment>
+  )
+}

src/index.tsx

@@ -1,10 +1,9 @@
-import * as React from 'react'
-import styles from './styles.module.css'
+// import * as React from 'react'
+// import styles from './styles.module.css'
+import SingleField from './SingleField'
 
-interface Props {
-  text: string
-}
+// interface Props {
+//   text: string
+// }
 
-export const ExampleComponent = ({ text }: Props) => {
-  return <div className={styles.test}>Example Component: {text}</div>
-}
+export { SingleField }