title: React.js: Add/Remove input field on click of a button
body: <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>