Redux InputField html

InputField

import React from 'react';
import PropTypes from 'prop-types';
import 'react-select/dist/react-select.css';


const InputField = (props) => {
  const {
    type,
    autoComplete,
    className,
    label,
    input,
    meta,
  } = props;
  const { error, touched } = meta;
  return (
    <div className="field ">
      <label
        htmlFor={props.label}
        className={props.labelClass}
      >{props.label}
      </label>
      <input
        className={
        className
      }
        autoComplete={
          autoComplete
        }
        {
        ...props.input
      }
        id={
        label
      }
        type={
        type
      }
      />
      {
        touched && error &&
        <p className="error">{error}</p>
      }
    </div>
  );
};

InputField.propTypes = {
  input: PropTypes.object.isRequired, // eslint-disable-line
  meta: PropTypes.object.isRequired, // eslint-disable-line
  type: PropTypes.string,
  label: PropTypes.string,
  className: PropTypes.string,
  labelClass: PropTypes.string,
  autoComplete: PropTypes.string,
};

InputField.defaultProps = {
  type: 'text',
  label: '',
  className: 'round-input',
  labelClass: 'darkblue-label',
  autoComplete: '-',
};

export default InputField;