title: How to design complex multi component form in react redux
body: <p>I have form. This form has lot of input elements. 
  User interaction with form: User first selects a product from multiselect (can select up to 32 products). Based on the selected product we show other form elements, which user has to fill.
  Input fields for a particular product can be categorized in mainly 3 categories. </p>
  
  <ol>
  <li><strong>Company related fields: (Company selection component)</strong> who is the buyer? etc.</li>
  <li><strong>Other fields: (Radio buttons, checkboxes, text, date etc..)</strong> Does buyer has sufficient money to buy? Etc.</li>
  <li><strong>Special other fields:</strong> These are same as other fields but their answer can add more products in the form, which in-term will add more input fields. E.g. <em>if answer of Does buyer has sufficient money to buy is NO</em>. Then you might ask another question such as, <em>if buyer doesn’t have money then do you think we should include product 2 as well which is for raising money for buyer to buy this commodity.</em></li>
  </ol>
  
  <p>After that user fills some common fields, these are not related to a particular product.
  As per the mocks given, entire form is divided in multiple accordions. See attached screenshots.
  Notes:</p>
  
  <ol>
  <li>Model to support this form looks like this: (One model for entire form)</li>
  </ol>
  
  <p>Form :
  {
  Buyers: 
  [
  {
  Name : "Abc",
  Id : 1234
  },
  ],
  Sellers:
  [
  {
  Name : "Abc",
  Id : 1234
  },
  ],
  Money: "",
  Question1: "",
  Question2 : "",
  }</p>
  
  <ol>
  <li>Common company related questions should be grouped together. E.g. say product 1 has a question called “Who is the buyer” and product 2 also has a question called “Who is the buyer”, then if user selects both the products, question with name Who is the buyer should not be shown more than once.</li>
  <li>Form needs to be validated for validations such as “required”, “min-length” and any other custom validation.</li>
  <li>Data model json (point # 1) will be saved when user clicks the submit button on the bottom of the page.</li>
  </ol>
  
  <p><strong>My Questions:</strong></p>
  
  <ol>
  <li>Scalable: How to architect the form so that adding/updating more
  form sections is not a pain later. This also needs to take care of
  the custom event handling for form elements. (Adding another product
  based on the answer of a question is an example of that)</li>
  <li>Performance: How to design this form so that it loads fast, even if
  user adds 5+ products.</li>
  <li>Maintainable: Another most important aspect is readability; it shouldn’t 
  become one giant blob of elements which a new developer in the team is 
  scared of touching.</li>
  </ol>
  
  <p>High level design/architecture will be really helpful.
  <a href="https://i.stack.imgur.com/VzXx3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VzXx3.png" alt="Mock of UI Page"></a></p>
  
  <p>Tech stack I am thinking of using:
  React and Redux</p>