Display Redux-Form validation error for embedded component - redux

Question

I have embedded a React component inside of another where I have applied validation on the parent:
const EmailAddressInput = (props) => {
const { emailList, onKeyUp } = props;
return (
<div>
<textarea
{...emailList}
/>
</div>
);
};
It's placed inside another component like:
let Emailer = (props) => {
const { fields: { passType, invitees },
return (
<legend>Select pass type:</legend>
{ renderPassTypes(eventsState.selectedEvent.AssociatedPassTypes) }
{passType.touched && passType.error && <span className="error">{passType.error}</span>}
<EmailAddressInput { ...invitees } onKeyUp={ () => handleEmailToBarKeyUp(invitees.emailList.value) } />
{invitees.touched && invitees.error && <span className="error">{invitees.error}</span> }
)
}
Now, given I want to ensure the EmailAddressInput's emailList is not empty, I added a custom validation rule:
const emailValidator = createValidator({
invitees: [requiredProperty('emailList')],
passType: required,
});
My validation utility looks like:
export function required(value) {
if (isEmpty(value)) {
return 'Required';
}
}
export function requiredProperty(fieldName) {
return function (value) {
return required(value[fieldName]);
};
}
export function createValidator(rules) {
return (data = {}) => {
const errors = {};
Object.keys(rules).forEach((key) => {
const rule = join([].concat(rules[key])); // concat enables both functions and arrays of functions
const error = rule(data[key], data);
if (error) {
errors[key] = error;
}
});
return errors;
};
}
Now when I submit my form with the EmailAddressInput textarea empty, createValidator returns {invitees: 'Required'}. The form submission is halted as expected (hooray!) but the error message is lost.
Errors are added as an errors property of the Redux-Form field object, but invitees isn't a field object, so I guess for that reason the collection of errors isn't being attached.
The field is actually the emailList textarea in EmailAddressInput, but that isn't getting the errors collection attached as the relevant key in the errors collection is different (invitees vs emailList)
Any idea how I can get that error displayed?

Answer 1

The trick was to project the right structure from my validation rule functions:
export function requiredProperty(fieldName) {
return function (value) {
const error = required(value[fieldName]);
if (error) {
return { [fieldName]: error };
}
};
}