Can't seem to refactor redundant Hook Form code into fragments

[king612]

HI, this may be just a React question, but I've only encountered it using Hook Forms, so I wanted to ask here.

I have a form with several fields requiring non-trivial validation, but the JSX is highly redundant across the fields so I'd like to refactor the repeating part into a React.Fragment. This repeating section has the usual conditional rendering of validation error messages. However, after I do the refactoring, the form validation dependent conditional rendering never fires. Is there a reason this wouldn't work with Hook Forms?

Here's the starting code:

                       <input type="text" className="form-control" name="meanPOEKA" id="meanPOEKA" placeholder="0.0..."
                            ref={ 
                                register({ 
                                    pattern: /^0?\.(\d){1,18}$/,
                                    validate: () => atLeastOneMR(getValues()), 
                                    valueAsNumber: true
                                 })
                            }
                        />
                        { errors.meanPOEKA?.type === 'pattern' && 
                            <span className="has-error">0.0..., between 0 and 1</span>
                        }
                        { errors.meanPOEKA?.type === 'validate' &&
                            <span className="has-error">At least one MR field must be entered</span>
                        }

Then refactored, it looks like this:

{ validatedMrInput('meanPOEKA', register, getValues) }

with the refactored method like this:

function validatedMrInput(name, register, getValues) {
    return (
        <React.Fragment>
            <input type="text" className="form-control" name={name} id={name} placeholder="0.0..."
                ref={ 
                    register({ 
                        pattern: /^0?\.(\d){1,18}$/,
                        validate: () => atLeastOneMR(getValues()), 
                        valueAsNumber: true
                    })
                }
            />
            { `errors.${name}?`.type === 'pattern' && 
                <span className="has-error">0.0..., between 0 and 1</span>
            }
            { `errors.${name}?`.type === 'validate' &&
                <span className="has-error">At least one MR field must be entered</span>
            }
        </React.Fragment>
    )
}

It renders just fine, but the conditional error rendering never fires when bad input are provided in the field. I tried wrapping the whole fragment in a <div>, but that made no difference.

Any suggestions would be greatly appreciated.

[bluebill1049]

can you share a simple codesandbox with your implementation above?

[Moshyfawn]

The register API is meant to spread the value and value handlers props to pass them down