wraps input field inside a label tag #14

ashatat · Nov 10, 2018 · 1a3d889 · 1a3d889
2 parents dbed096 + a89fe70
commit 1a3d889
Showing 1 changed file with 37 additions and 9 deletions.
diff --git a/client/src/components/common/InputField/index.jsx b/client/src/components/common/InputField/index.jsx
@@ -1,26 +1,50 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 
+// this line disables the windows end of line check for eslint.
+/* eslint linebreak-style: ["error", "windows"] */
 // declares propTypes validation.
 const propTypes = {
   type: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   value: PropTypes.string,
   placeholder: PropTypes.string,
   className: PropTypes.string.isRequired,
+  onChange: PropTypes.func,
+  onClick: PropTypes.func,
+  id: PropTypes.string,
+  labelValue: PropTypes.string,
 };
 
 const Input = props => {
-  const { type, name, value, placeholder, className } = props;
+  const {
+    id,
+    labelValue,
+    type,
+    name,
+    value,
+    placeholder,
+    className,
+    onChange,
+    onClick,
+  } = props;
 
   return (
-    <input
-      type={type}
-      placeholder={placeholder}
-      name={name}
-      value={value}
-      className={className}
-    />
+    <Fragment>
+      <label htmlFor={id}>
+        {labelValue}
+        <input
+          id={id}
+          type={type}
+          placeholder={placeholder}
+          name={name}
+          value={value}
+          className={className}
+          onChange={onChange}
+          onClick={onClick}
+        />
+      </label>
+    </Fragment>
   );
 };
 
@@ -31,6 +55,10 @@ Input.propTypes = propTypes;
 Input.defaultProps = {
   value: null,
   placeholder: null,
+  onChange: null,
+  onClick: null,
+  id: null,
+  labelValue: null,
 };
 
 export default Input;