Docs ErrorMessage component seems wrong

[react-hook-form]

Docs ErrorMessage component seems wrong

[bluebill1049]

you are right! want to send us a PR to fix it?

[torian257x]

@bluebill1049 sorry I planned to actually create a PR but somehow it went forgotten

there is still an issue with your commit, there is still
if (!errors.name) return null;

which imho is still wrong

cheers

[bluebill1049]

please send a PR to help @jossnaz :)

[torian257x]

please send a PR to help @jossnaz :)

I will gladly help. The problem I have, and that's me, is that I don't think the recommended solution is complete. Even with the tipo fixed.

The question I have, how do you use your library for error components?

because what I ended up doing is maybe not optimal.

What I realized is that I need access to the error state on different levels of the component tree, otherwise it's bad. So I exposed the function to access my error message... I read about the FormContext in the comment, but a google search auto corrected my search to formviks solution, so I didn't find the actual formcontext referenced in the code, so i quickly gave up on that formcontext (...)

So maybe even a little hint and with link. And I honestly don't think it's good to hide that component in advanced usage at all. That should be, honestly, the last step of the getting started.

What I have written so far, and I am only using the required error so far, is this:

Example component making use of it:

import React from 'react';
import PropTypes from 'prop-types';
import myappInput from "./myappInput";
import ErrorMessage, {getErrorMessage} from "../ErrorMessage";

const myappGDPRagree = React.forwardRef((props, ref) => {
  return (
     <>
       <myappInput id="gdpr_agree_el" type="checkbox" name="GDPR_Agreement__c" ref={ref}/>
       <label
           className={"myapp-input-checkbox-label " + (getErrorMessage(props.errors, "GDPR_Agreement__c") ? ' myapp-error ' : '')}
           htmlFor="gdpr_agree_el">
         <span>I consent to having MYAPP store my submitted information and sending me future communications on phishing threats and solutions</span>
       </label>
       <ErrorMessage errors={props.errors} name="GDPR_Agreement__c"/>
     </>
  )
});

myappGDPRagree.propTypes = {
  errors: PropTypes.object,
};

export default myappGDPRagree;

Basic error component:

import React from 'react';
const messages = {
  test: {
    min: "This field required minLength of 8"
  },
  required: {
    message: '* This field is required.'
  }
};

export const getErrorMessage = (errors, name) => {
  if(!errors){
    return null;
  }

  if(errors[name] &&  messages[errors[name].type] && messages[errors[name].type].message){
    return messages[errors[name].type].message;
  }else{
    return null;
  }
};

const ErrorMessage = ({ errors, name }) => {


  // Note: if you are using FormContext, then you can use Errors without props eg:
  // const { errors } = useFormContext();
  if (!errors || !errors[name]) return null;

  if(errors[name] &&  messages[errors[name].type] && messages[errors[name].type].message){
    return <span className="myapp-field-error">{messages[errors[name].type].message}</span>;
  }else{
    return null;
  }
};


export default ErrorMessage;

[bluebill1049]

The question I have, how do you use your library for error components?

What's the confusion in here? I thought our errors object is flat? you just need the name of your input.

https://react-hook-form.com/api#errors

[torian257x]

@bluebill1049

What's the confusion in here? I thought our errors object is flat? you just need the name of your input.

yes, the question basically was whether and if yes, how do you wrap the error message? Don't you create an 'errormessage' component? because right, error messages should look basically the same over the whole app, and as well style the inputs depending on whether there is an error or not. Like, make a red ! and wrap it in a red border or something the like.... Or maybe I'm over complicating things? what would be the best approach in your opinion to do that? because how I do it is using the ErrorMessage component from that docs, but that isn't enough. I have to style the parent to get the right design. That's why I added a function getErrorMessage which I can use to peak if there is an error, then add a class to the parent to get the error styling right for the parent components. But I'm not entirely convinced, that that is the best way.

[bluebill1049]

It's really up to you on how to handle the errors.

at work, we accept error as a prop and display the error with style and message (which inside the error object). so basically baked inside the input/select component.