withError.tsx

/* eslint-disable react/prefer-stateless-function */
import React from 'react'

interface WithErrorProps {
  className?: string
  error?: string
  name?: string
}

export const withError = <P extends object>(
  Component: React.ComponentType<P>
) =>
  class WithError extends React.Component<P & WithErrorProps> {
    render() {
      const { className, error, name, ...props } = this.props
      const thisClassName = error ? `${className} is-invalid` : className

      return (
        <>
          <Component
            aria-invalid={!!error}
            aria-describedby={error ? `error-${name}` : undefined}
            className={thisClassName}
            name={name}
            {...(props as P)}
          />
          {error && (
            <div id={`error-${name}`} className="rn-form__invalid-feedback">
              {error}
            </div>
          )}
        </>
      )
    }
  }