title: React Multi Step Form Submit and Validation
body: <p>So I have a form inside a master page, where it will render different textbox, or radio box, or date picker, etc. On every click of next button and back button, it will either go to the next component or prev component, and save the whole form.</p>
  
  <p>Pretend data model will look like this
  {field: [{textbox1: texbox1value}, {datepicker1: datepicker1value}]</p>
  
  <p>Given a pseudocode more or less like this.</p>
  
  <p>ContainerPage.ts</p>
  
  <pre><code>&lt;form&gt;
     renderComponent(listOfComponent) // this will switch based on the link
     &lt;button back&gt;
     &lt;button next&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Component1.ts</p>
  
  <pre><code>&lt;input textbox&gt;
  </code></pre>
  
  <p>Component2.ts</p>
  
  <pre><code>&lt;input datepicker&gt;
  </code></pre>
  
  <p>I was able to get it going to save, but wondering how do you validate the input if the button is on the parent component?</p>
  
  <p>I'm following this site more or less but it does not have validation
  <a href="https://css-tricks.com/the-magic-of-react-based-multi-step-forms/" rel="nofollow noreferrer">https://css-tricks.com/the-magic-of-react-based-multi-step-forms/</a></p>
  
  <p>I also saw some site develop it in such a way the form is on each component instead of the master page. but ended up using 1 form.</p>