refactor: wrap Input into Field

4 files changed, 12 insertions, 9 deletions

diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index 69b97a2..896a974 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
+import { Field } from 'formik';
 
 export interface Props extends React.InputHTMLAttributes<HTMLInputElement> {
   label?: string;
 }
 
-const Input: React.FC<Props> = ({ label, ...props }) => {
+const InputBase: React.FC<Props> = ({ label, ...props }) => {
   return (
     <div className="m-2 mb-4 flex flex-col">
       <label htmlFor={props?.name} className="mb-1 text-gray-700">{label}</label>
@@ -18,4 +19,6 @@ const Input: React.FC<Props> = ({ label, ...props }) => {
   );
 };
 
+const Input: React.FC<Props> = props => <Field {...props} as={InputBase} />;
+
 export default Input;
diff --git a/src/containers/ContractorForm.tsx b/src/containers/ContractorForm.tsx
index a67eabe..4e83fae 100644
--- a/src/containers/ContractorForm.tsx
+++ b/src/containers/ContractorForm.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
-import { Form, Field } from 'formik';
+import { Form } from 'formik';
 import Input from '../components/Input';
 
 const ContractorForm: React.FC = () => {
   return (
     <Form id="form">
       <div className="max-w-lg">
-        <Field name="name" label="Название" as={Input} />
-        <Field name="vatId" label="УНП" as={Input} />
-        <Field name="debt" type="number" label="Долг ($)" as={Input} />
+        <Input name="name" label="Название" />
+        <Input name="vatId" label="УНП" />
+        <Input name="debt" type="number" label="Долг ($)" />
       </div>
     </Form>
   );
diff --git a/src/containers/ProductForm.tsx b/src/containers/ProductForm.tsx
index 4d01881..d99d3c6 100644
--- a/src/containers/ProductForm.tsx
+++ b/src/containers/ProductForm.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Form, Field } from 'formik';
+import { Form } from 'formik';
 import Input from '../components/Input';
 
 
@@ -7,8 +7,8 @@ const ProductForm: React.FC = () => {
   return (
     <Form id="form">
       <div className="max-w-lg">
-        <Field name="name" label="Название" as={Input} />
-        <Field name="price" type="number" label="Цена ($)" as={Input} />
+        <Input name="name" label="Название" />
+        <Input name="price" type="number" label="Цена ($)" />
       </div>
     </Form>
   );
diff --git a/src/index.tsx b/src/index.tsx
index 932fbf3..1005a9d 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -23,7 +23,7 @@ const App: React.FC = () => (
     <Switch>
       <Route exact path="/" component={Home} />
       {services.map(service => (
-        <Route path={`/${service.route}`}>
+        <Route path={`/${service.route}`} key={service.route}>
           <ServiceProvider value={service}>
             <Service />
           </ServiceProvider>