Problem Statement:
I need to get the input data of all the fields in either Container Component or a Form Component.
Details:
There are 4 to 5 different form Components, each using some common fields in a section. They are extracted into different components and are imported in the top level form components for re-usability purposes. These extracted components have multiple input fields (between 7 to 10 fields each). Here is how the structure of my components looks like,
- Container Component
-- Form Component A (Contains the submission click handler)
--- InputFieldTypeA Component
--- InputFieldTypeB Component
--- ...
-- Form Component B (Contains the submission click handler)
--- InputFieldTypeA Component
--- InputFieldTypeB Component
--- ...
-- Form Component C (Contains the submission click handler)
--- InputFieldTypeA Component
--- InputFieldTypeB Component
--- ...
I have tried this link but since I have too many input fields, it doesnt make sense to have so many callback handlers (which will be required in FormA, FormB and C components). Other solution was to use a ref given in the same link but I read somewhere that is not the right use of refs and so I gave up on that idea. state cannot be used either in any of these child components (InputFieldTypeA, InputFieldTypeB] etc because we need to lift the state up to the container component.
What is the best solution/strategy in this situation? What is the right way of handling such deeply nested components?
