Thank you for the excellent article. It's a really nice reusable validated form component.
I have a couple of comments on the code in your CodePen based on my experience building this component.
I think the regular expression doesn't need to specify the length? The minLength attribute covers this and gives a more useful error.
When passing a regex in to a React component, you may need to modify it slightly (see stackoverflow.com/questions/444979...). I replaced
"(?=.*\d)(?=.*[a-z]).{6,}"
with
"^(?=.*\d)(?=.*[a-z]).+$"
In the Form component, I replaced
render() { const props = [...this.props];
render() { const props = { ...this.props };
because it generated an error. I think the original code was trying to cast an object to an array?
Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink.
Hide child comments as well
Confirm
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Thank you for the excellent article. It's a really nice reusable validated form component.
I have a couple of comments on the code in your CodePen based on my experience building this component.
I think the regular expression doesn't need to specify the length? The minLength attribute covers this and gives a more useful error.
When passing a regex in to a React component, you may need to modify it slightly (see stackoverflow.com/questions/444979...). I replaced
with
In the Form component, I replaced
with
because it generated an error. I think the original code was trying to cast an object to an array?