add input helper

latviancoder · latviancoder · commit d35e9f8d043a · 2018-11-04T15:43:56.000+01:00
diff --git a/src/components/form-library/FormLibrary.js b/src/components/form-library/FormLibrary.js
@@ -12,14 +12,14 @@ function MyFormLibrary({ children, initialValues, onValuesChanged, onSubmit, val
     }
   }, [values]);
 
-  function handleChange(e) {
+  function handleChange(name, value) {
     updateValues({
       ...values,
-      [e.target.name]: e.target.value
+      [name]: value
     });
     updateErrors({
       ...errors,
-      [e.target.name]: undefined
+      [name]: undefined
     });
   }
 
@@ -37,11 +37,18 @@ function MyFormLibrary({ children, initialValues, onValuesChanged, onSubmit, val
     submitForm();
   }
 
+  function input(name) {
+    return {
+      value: values[name],
+      onChange: (e) => handleChange(name, e.target.value)
+    }
+  }
+
   const ctx = {
     values,
     errors,
-    handleChange,
-    handleSubmit
+    handleSubmit,
+    input
   };
 
   return <FormContext.Provider value={ctx}>
diff --git a/src/components/form-library/index.js b/src/components/form-library/index.js
@@ -4,25 +4,21 @@ import { object, string } from 'yup';
 import MyFormLibrary, { FormContext } from './FormLibrary';
 
 function MyForm() {
-  const { values, errors, handleChange, handleSubmit } = useContext(FormContext);
+  const { values, errors, handleSubmit, input } = useContext(FormContext);
 
   return <form onSubmit={handleSubmit}>
     <div>
       <input
         placeholder="Email"
-        name="email"
         autoComplete="off"
-        value={values.email}
-        onChange={handleChange}
+        {...input('email')}
       />
       {errors.email && <div>{errors.email}</div>}
     </div>
     <div>
       <input
         placeholder="Name"
-        name="name"
-        value={values.name}
-        onChange={handleChange}
+        {...input('name')}
       />
       {errors.name && <div>{errors.name}</div>}
     </div>
