title: Handling Large Form with React
body: <p>I have a large registration form in a React-redux page.</p>
  
  <p>I do not need to bind any data to the forms, as it will always load blank, and on submit can just send data to API and be redirected to a "Please check our email" page.</p>
  
  <p>The issue I am also having, is that I am using MaterializeReact and using their custom  Components. This just renders as a input with a name, so traditional formdata would be intact..</p>
  
  <p>All the examples online, seem to want me to create a state, then for each input element I bind the state to it, and then all my values will be in this.state.</p>
  
  <p>It seems a little bit of a long way around, as I have 30, 40 fields.</p>
  
  <p>I found a way using refs, but I did no want to use it as I know ref strings are being deprecated. The ref solution is like so:</p>
  
  <pre><code>submitform() {
      const formData = {};
      for (const field in this.refs) {
        formData[field] = this.refs[field].value;
      }
      //Now I have the all values wrapped in a object to send to server
    }
  
  &lt;form&gt;
    &lt;Input ref="firstName" /&gt;  //MaterializeReact Component. Renders as &lt;input&gt;
   &lt;button type="button" onclick="{submitForm}" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>What would be the recommend way of getting the value of many inputs without the hassle of binding each one?</p>