title: React nested form values
body: <p>How can I get nested form elements values in ReactJS?</p>
  
  <p><strong>Example</strong></p>
  
  <p>Let say I have a form with following elements:</p>
  
  <pre><code>&lt;form onSubmit={handleSubmit(e)}&gt;
    &lt;input ref="name" type="text" /&gt;
    { /* possibly unlimited number of emails */ }
    &lt;input ref="email[]" type="text" /&gt;
    &lt;input ref="email[]" type="text" /&gt;
    { /* possibly unlimited number of book objects */ }
    &lt;fieldset&gt;
      &lt;input ref="title" type="text" /&gt;
      &lt;input ref="author" type="text" /&gt;
    &lt;/fieldset&gt;
    &lt;fieldset&gt;
      &lt;input ref="title" type="text" /&gt;
      &lt;input ref="author" type="text" /&gt;
    &lt;/fieldset&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I want to get values of these fields onSubmit.
  The easiest way and most intuitive would be through:</p>
  
  <pre><code>this.refs
  </code></pre>
  
  <p>But it will flatten all refs and return only last of the array elements. So it will return something like:</p>
  
  <pre><code>{ name: '', email[]: '', title: '', author: '' }
  </code></pre>
  
  <p>What I want to get should look like this:</p>
  
  <pre><code>{ name: '',
    email:['', ''],
    books: [
      { title: '', author: '' },
      { title: '', author: '' }
    ]
  }
  </code></pre>
  
  <p>Or something similar.</p>
  
  <p>Maybe using refs is not the best option, but I'm not sure about any other alternatives.</p>
  
  <p><strong>EDIT</strong>
  Executing:</p>
  
  <pre><code>e.target.childNodes
  </code></pre>
  
  <p>Returns something similar to what I want to achieve but it returns plain HTML nodes so getting values out of them is quite a lot of work (writing some custom method for processing nodes tree).</p>