I am dynamically rendering dropdown and an input field in a row. User can add and remove these rows. I have added validation for Email and displaying the error message below the input field. The problem is when i add more than 1 dropdown, and input an incorrect email, the validation is displaying for all the input fields. How can i display the error message on the exact input field. This is my function where i validate the input against the regex that i am storing it in state.
I have put the entire code in Sandbox to take a look at.
handleInputValueChange = (socialUrl, id) => {
const { SocialData, socialMediaUrlError, validationRegex } = this.state;
const { onInputChange, formKey } = this.props;
const updatedSocialData = SocialData.map((socialData) => {
switch(socialData.socialname) {
case 'email':
if(!socialUrl.match(validationRegex.EmailRegex)) {
socialMediaUrlError['EmailError'] = true;
this.setState((prevState) => {
return {
...prevState,
SocialData: updatedSocialData,
socialMediaUrlError: socialMediaUrlError
}
});
} else {
socialMediaUrlError['EmailError'] = false;
this.setState((prevState) => {
return {
...prevState,
SocialData: updatedSocialData,
socialMediaUrlError: socialMediaUrlError
};
});
}
break;
default: ""
}
return {
...socialData,
name: socialUrl,
};
}
return socialData;
});
};
