Converted DateInput into functional component

src/utils/DateInput.js

@@ -3,35 +3,40 @@ import { isNil } from 'ramda';
 import DatePicker from 'react-datepicker';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import calendarIcon from '@fortawesome/fontawesome-free-regular/faCalendarAlt';
+import * as PropTypes from 'prop-types';
 import './DateInput.scss';
 
-export default class DateInput extends React.Component {
+const propTypes = {
-  constructor(props) {
+  className: PropTypes.string,
-    super(props);
+  isClearable: PropTypes.bool,
-    this.inputRef = props.ref || React.createRef();
+  selected: PropTypes.oneOfType([ PropTypes.string, PropTypes.object ]),
-  }
+  ref: PropTypes.object,
+};
 
-  render() {
+const DateInput = (props) => {
-    const { className, isClearable, selected } = this.props;
+  const { className, isClearable, selected, ref = React.createRef() } = props;
   const showCalendarIcon = !isClearable || isNil(selected);
 
   return (
     <div className="date-input-container">
       <DatePicker
-          {...this.props}
+        {...props}
         className={`date-input-container__input form-control ${className || ''}`}
         dateFormat="YYYY-MM-DD"
         readOnly
-          ref={this.inputRef}
+        ref={ref}
       />
       {showCalendarIcon && (
         <FontAwesomeIcon
           icon={calendarIcon}
           className="date-input-container__icon"
-            onClick={() => this.inputRef.current.input.focus()}
+          onClick={() => ref.current.input.focus()}
         />
       )}
     </div>
   );
-  }
+};
-}
+
+DateInput.propTypes = propTypes;
+
+export default DateInput;

test/utils/DateInput.test.js

@@ -13,12 +13,7 @@ describe('<DateInput />', () => {
     return wrapped;
   };
 
-  afterEach(() => {
+  afterEach(() => wrapped && wrapped.unmount());
-    if (wrapped !== undefined) {
-      wrapped.unmount();
-      wrapped = undefined;
-    }
-  });
 
   it('wrapps a DatePicker', () => {
     wrapped = createComponent();