0

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?

Ahmed
  • 2,966
  • 7
  • 42
  • 69
  • Are you using Redux? You could have them all in the store and your components could just pick what they need. – squillman Sep 04 '20 at 16:57
  • Would it be a preferred way of doing it? I have to work on adding redux. Haven't gotten their yet. – Ahmed Sep 04 '20 at 17:04
  • You'd have to answer for yourself if it's preferred. What it will let you do though is store the data in one place that all of your components have equal access to. – squillman Sep 04 '20 at 17:08
  • But then how will you go about testing the components? – Ahmed Sep 04 '20 at 17:30
  • Unit tests? There are plenty of resources and articles outlining how to test with Redux in the picture. – squillman Sep 04 '20 at 17:48
  • @squillman - I thought allot about it but we are saying that all fields data that changes (on texttual changes by user) would be saved in store and will be retrieved from the store. This idea seems very heavy on store also with a caveat that youll have an action for each and every field stored. Seems like an unnecessary load on the store itself. Or perhaps I am wrong. Kindly please provide any examples if you can. i am sure other would have a similar situation but does everyone stores their fields data in Store? – Ahmed Sep 09 '20 at 15:03
  • Yes, that is what the store is for. In all my react/redux projects all of the data is in the store with the exception of precious few things that are stored in local state. Those things are typically just UI drivers and have nothing to do with the actual app data. You don't need to have an action for every field. You can typically abstract it to a single action and index into your objects by field name when updating store values in the action. – squillman Sep 09 '20 at 15:31
  • Can you please provide an example? I am new and barely scratching the surface of React. – Ahmed Sep 09 '20 at 16:53
  • It's really outside of the scope here. Have a look through the stuff here: https://react-redux.js.org/introduction/quick-start – squillman Sep 09 '20 at 17:19
  • I was talking about the abstraction on it. How would you go about it? Thank you. – Ahmed Sep 09 '20 at 18:23
  • If your store object (myObj) looks something like this: `{Field1: 1, Field2: 2}` then you can write an action that takes a field name (e.g. fieldName) and value (newValue) as input parameters. Your action then updates the store object with `myObj[fieldName] = newValue;` Then you call that action in the onChange of all of your form fields. One action handles all form changes. – squillman Sep 09 '20 at 18:29

0 Answers0