react-hook-form validation not working with custom fields array

Question

I am using react-hook-form with custom dynamic input fields array, it looks like the validation is working when I click on submit button, but it doesn't show the error messages, I am creating the state as:

const [formFields, setFormFields] = useState([
{
  height: 45,
  label: "tv",
  placeholder: "555",
  name: "tv",
  maxWidth: 203,
  error: errors.tv,
  value: ""
},
{
  height: 45,
  label: "radio",
  placeholder: "90%",
  name: "radio",
  maxWidth: 126,
  error: errors.radio,
  value: ""
},
{
  height: 45,
  label: "instagram",
  placeholder: "90%",
  name: "instagram",
  maxWidth: 126,
  error: errors.instagram,
  value: ""
}

]);

and creating the input as:

{formFields.map((item, index) => {
      return (
        <div key={index}>
          <TextInput
            name={item.name}
            label={item.label}
            height={item.height}
            placeholder={item.placeholder}
            error={item.error}
            value={item.value}
            inputRef={register({
              required: true
            })}
            onChange={fieldOnChange(index)}
          />
          {item.error && <span>Enter a valide value</span>}
        </div>
      );
    })}

you can check the demo

any help please?

Shubham Verma · Accepted Answer · 2020-03-03 03:30:35Z

2

It's because you formFields in useState. It runs only one time. Show it already captures errors value i.e first initially value. You need to either use useEffect to keep track change of error value or change condition of item.error to directly errors.

react-hook-form uses its errors for validation i.e in your case it should be

{errors[item.name] && <span>Enter a valid value</span>}

Here is demo link : https://codesandbox.io/s/blue-shape-pv8jf

answered Mar 3, 2020 at 3:30

Shubham Verma

5,0641 gold badge12 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

react-hook-form validation not working with custom fields array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related