Reference a Field's value in a FieldArray for className change - reactjs

Question

I have a React Component (originally written by someone else) that displays a form for person (redux-form). Recently, I've changed the component to be a FieldArray (component of redux-form).
I have a validation for the email Field that impacts className for the email Field (red colored when email is incorrectly formatted, black colored otherwise). It worked fine when it wasn't a FieldArray but now it validates all email Fields at once because of
// (in constructor)
this.email = React.createRef();
// (in Field)
ref={props.parent.email}
, i.e. props.parent.email is a global/static ref.
Example: There are two persons. One of them has an incorrectly formatted email, but both emails are displayed in red.
As I understand it, I'd need to have a dynamic ref but that didn't work the way I tried.
ref={`${person}.email.ref`}
Error is
"Function components cannot have refs. Did you mean to use React.forwardRef()?"
I didn't find anything helpful on forwardRef regarding FieldArray, besides the fact that it is a valid prop.
My objective is: When several persons are created by the user and/or loaded from Redux store, be able to show every correctly formatted email in black, and every incorrectly formatted email in red.
Any help is greatly appreciated!
import React from "react";
import { Field, reduxForm, FieldArray } from "redux-form";
import { connect } from "react-redux";
import classNames from 'classnames'
import { MAIL_PATTERN } from "../some_file";
import MoreGeneralComponent from "../some_other_file";
const renderField = ({ input, label, type, options, className, meta: { touched, error }, style, disabled, hidden }) => (
<div style={style}>
<label>{label}</label>
<div>
<input {...input} disabled={disabled ? true : false} hidden={hidden ? true : false} type={type} placeholder={label} className={className} />
</div>
</div>
);
const renderPerson = ({ fields, meta: { error, submitFailed }, ...props }) => {
setTimeout(props.validate(fields));
return (
<ul className="personlist">
{fields.map((person, index) => (
<li key={index} className="person">
<h4>Person #{index + 1}</h4>
<Field
component={renderField}
type="text"
ref={props.parent.email}
className={classNames({invalid: !props.parent.state.validEmail})}
validate={props.parent.validateEmail}
name={`${person}.email`}
label="Email"
key={`${person}.email`}
></Field>
<button type="button" onClick={() => fields.remove(index)}>
Remove
</button>
</li>
))}
{(!(fields.length >= props.max)) && (
<li className="addperson">
<button
type="button"
onClick={() => fields.push({})}
disabled={fields.length >= props.max}
>
Add Person
</button>
{submitFailed && error && <span>{error}</span>}
</li>)}
</ul>
);
};
class Person extends MoreGeneralComponent {
constructor(props) {
super(props);
if (this.state.ready) {
this.max = 4;
this.data = ["email"];
this.email = React.createRef();
}
}
validate = fields => {
if (!fields || !fields.getAll()) {
return;
}
let valid = true;
fields.getAll().forEach(field => {
for (let d of this.data) {
if (!field[d] || field[d].length < 2) {
valid = false;
return;
} else if (d === "email") {
valid = field[d] && MAIL_PATTERN.test(field[d]) ? valid : undefined;
}
}
});
if (valid !== this.state.valid) {
this.setState({
valid: valid
});
}
};
validateEmail = (value) => {
const valid = value && MAIL_PATTERN.test(value) ? value : undefined;
this.setState({validEmail: !!valid});
return valid
}
renderQuestion() {
return (
<div className={style.question}>
<fieldset>
<FieldArray
name="persons"
component={renderPerson}
props={{ max: this.max, validate: this.validate, parent: this }}
rerenderOnEveryChange={true}
/>
</fieldset>
</div>
);
}
}
const mapStateToProps = s => {
const persons = s.persons
var initialValuesPersons = []
persons.map(item => initialValuesPersons.push({
"email": item.email || ""
}))
var initialValues = { "persons": initialValuesPersons}
return {
initialValues,
formdata: s.form
}
}
export default connect(mapStateToProps, null)(reduxForm(
{
form: 'person',
destroyOnUnmount: false,
enableReinitialize: true,
keepDirtyOnReinitialize: true
})(Person))

Answer 1

With the help of a colleague I came up with a work-around that just uses JS (working around using setState).
toggleClass = (elementName, addInvalid) => {
const element = document.getElementsByName(elementName);
element.forEach(item => {
// remove class and add later, if necessary
item.classList.remove("invalid");
if (addInvalid) {
item.classList.add("invalid");
}
})
}
validateEmail = (value, person, form, nameField) => {
const valid = value && MAIL_PATTERN.test(value) ? value : undefined;
this.toggleClass(nameField, !valid);
return valid;
}