import React , { PropsWithChildren , useEffect } from "react" ; import { FieldError } from "react-hook-form" ; export type ErrorMessageValue = string | Error | FieldError ; type ErrorMessageProps = PropsWithChildren < { name ? : string ; error ? : ErrorMessageValue ; } > ; function getErrorTypeMessage ( type , name ? ) { switch ( type ) { case "required" : return `${ name || "This field" } is required.` ; default : return "An unknown error ocurred" ; } } function getErrorMessage ( error ? , name ? ) { if ( ! error || error === "" ) { return "An unknown error ocurred" ; } if ( typeof error === "string" ) { return error ; } const fieldError = error as FieldError ; if ( fieldError . type ) { return getErrorTypeMessage ( fieldError . type , name ) ; } if ( error . message ) { return error . message ; } else { } } export function ErrorMessage ( { name , error , children } ) { useEffect ( ( ) => { console . error ( error ) ; } , [ error ] ) ; return < div className = "error" > { children || getErrorMessage ( error , name ) } < /div>; }