React.js: Add/Remove input field on click of a button
<p>React.js:  Add/Remove input field on click of a button:</p>

<p>When a user click Add, I want a new input field to be added.</p>

<p>The name property is changing for every input, by increment the number in the middle:</p>

<p>document-0-document
document-1-document</p>

<p>I receive the following error:</p>

<p>"TypeError: this is undefined var arr = this.state.documents;"</p>

<p>I have an idea what is creating the error but I didn't found a fix.</p>

<p>HTML Code.</p>

<pre><code>&lt;fieldset class="fieldset"&gt;
  &lt;input type="file" name="document-0-document"&gt;
  &lt;div class="more-documents"&gt;
    &lt;input type="file" name="document-1-document"&gt;
    &lt;button data-reactid=".0.1"&gt;Add&lt;/button&gt;
  &lt;/div&gt;
 &lt;/fieldset&gt;
</code></pre>

<p>Main Component code:</p>

<pre><code>class DocumentsFieldSet extends Component{

  constructor(props){
      super(props);
      this.state = {documents:[]}
  }

  add(i) {
      var arr  = this.state.documents;
      arr.push(i);
      this.setState({documents: arr});
  }

  eachDocument () {
      return &lt;DocumentInput key={i}/&gt;
  }

  render (){
      return (
        &lt;div&gt;
            {this.state.documents.map(this.eachDocument)}
            &lt;button onClick={this.add.bind()}&gt;Add&lt;/button&gt;
        &lt;/div&gt;
      )
  }
}

ReactDOM.render(&lt;DocumentsFieldSet/&gt;, document.querySelector ('.more-    documents'))
</code></pre>

<p>Component Code</p>

<pre><code>class DocumentInput extends Component {
  render() {
      return &lt;input type="file" name="document-{i}-document" ref="" /&gt;;
  }
}

export default DocumentInput;
</code></pre>