I am creating a Form which has some reusable input fields. I have extracted the fields into their own components. But now I have several such components and upon submit I need to post the data from these nested components to an action. Not only that but I also want to be able to show an error beneath each of these fields when I post the Data. Sorry that I dont have the code handy but I can explain this through the help of the following depiction,
- Container Component -- Form Component A (Contains the submission click handler) --- InputFieldTypeA Component1 --- InputFieldTypeB Component1 --- ... --- InputFieldTypeA Component2 --- InputFieldTypeB Component2 --- ... --- InputFieldTypeA Component3 --- InputFieldTypeB Component3 ---
I know I can create a ref and upon a click of a submit, I can use the ref to extract all the fields from each component. Another way would be to store form data in Redux. However I am not sure which one is the best practice or an industry standard when it comes to storing form data and how do you go about showing error messages? How can we reduce the lengthy leg work of pulling the data from each component, validate it and then show validation errors? Is there a way to automate this process?