import Typography from '@material-ui/core/Typography'
import React, {FC, memo} from 'react'
import {useFormState} from 'react-final-form'

const FormErrorsTextBase: FC = () => {
  const { error, submitError } = useFormState()
  return error || submitError ? (
    <Typography variant="body1" color="error" gutterBottom>
      {error || submitError}
    </Typography>
  ) : null
}

export const FormErrorsText = memo(FormErrorsTextBase)
export default FormErrorsText