title: Add Inputs in React with add button
body: <p>I'm trying to make a set of inputs that can be duplicated or removed.</p>
  
  <p>I've found and used a combination of this :
  <a href="https://jsfiddle.net/69z2wepo/36745/" rel="nofollow noreferrer">https://jsfiddle.net/69z2wepo/36745/</a>
  and this (because the code above does not handle removal) :
  <a href="https://codepen.io/lichin-lin/pen/MKMezg" rel="nofollow noreferrer">https://codepen.io/lichin-lin/pen/MKMezg</a></p>
  
  <p>I may not need to point at a specific input since in my interface you should always only be adding a new one if the one before is filled (i'll set up the condition later) and therefore only deleting the last. So I'm fine with a simple counter as a solution to all this (though I'll need 3-4 counters for the different input types).</p>
  
  <pre><code>/* ************************************* */
  /* ********       IMPORTS       ******** */
  /* ************************************* */
  import React, { Component } from 'react';
  import { Card, CardBlock, Button, InputGroup, Input } from 'reactstrap';
  import ProviderInfos from '../ProviderInfos/ProviderInfos';
  
  /* ************************************* */
  /* ********      VARIABLES      ******** */
  /* ************************************* */
  
  const count = 0;
  
  /* ************************************* */
  /* ********      COMPONENT      ******** */
  /* ************************************* */
  export default class SearchExtendedComponent extends Component {
  
      constructor(props) {
          super(props);
          this.state = { inputList: [] };
          this.incrementCount = this.incrementCount.bind(this);
          this.decrementCount = this.decrementCount.bind(this);
      }
  
      incrementCount() {
        const inputList = this.state.inputList;
          this.setState({
              count: this.state.count + 1,
              inputList: inputList.concat(&lt;Input key={count} /&gt;),
          });
      }
      decrementCount() {
        const inputList = this.state.inputList;
          this.setState({
              count: this.state.count - 1,
              inputList: inputList.concat(&lt;Input key={count} /&gt;),
          });
      }
      render() {
          return (
              &lt;Card&gt;
                  &lt;CardBlock className="main-table"&gt;
                      &lt;InputGroup&gt;
                          &lt;Input placeholder="Type1" /&gt;
                          &lt;ProviderInfos /&gt;
                      &lt;/InputGroup&gt;
                      {/* THE IDEA IS TO HAVE AN ADD AND REMOVE BUTTON FOR EACH TYPE */}
                      &lt;InputGroup className="add-more"&gt;
                          &lt;button onClick={this.incrementCount}&gt;Add input&lt;/button&gt;
                          {this.state.inputList}
                      &lt;/InputGroup&gt;
                      &lt;InputGroup&gt;
                          &lt;Input placeholder="Type2" /&gt;
                          &lt;ProviderInfos /&gt;
                      &lt;/InputGroup&gt;
                      &lt;InputGroup&gt;
                          &lt;Input placeholder="Type3" /&gt;
                          &lt;ProviderInfos /&gt;
                      &lt;/InputGroup&gt;
                      &lt;Button color="secondary"&gt;Options&lt;/Button&gt;{' '}
                      &lt;Button id="btn"&gt;Exécuter&lt;/Button&gt;
                  &lt;/CardBlock&gt;
              &lt;/Card&gt;
          );
      }
  }
  </code></pre>
  
  <p>I get an error in the console :</p>
  
  <pre><code>Warning: flattenChildren(...): Encountered two children with the same key, `1:$0`. Child keys must be unique; when two children share a key, only the first child will be used.
  </code></pre>
  
  <p>and this seems fitting with what occurs :</p>
  
  <p>Only the first new input is added after that the "add" button ceases to work.</p>
  
  <p>As you can see I'm currently declaring the input within the functions ( or at least it seems to me like I am... Is that not what <code>const inputList = this.state.inputList;</code> does?) and I think that's the issue I should be declaring it next to "count" IMO but my attempts to do that :</p>
  
  <p><code>const inputList = this.state.inputList;</code></p>
  
  <p><code>const propTypes = {
      inputList: React.PropTypes.inputList,
  };</code></p>
  
  <p>have resulted in the app not loading at all : "Cannot read property 'state' of undefined".</p>
  
  <p>Not only that but that doesn't seem like clean refactored code to me since I'm doing it twice and keep in mind I'm going to have to duplicate this code even more since both the add and delete functions (and buttons) will have to be there for three to four different input types down the line.</p>
  
  <p>UPDATE : moved the remove button part to another question : <a href="https://stackoverflow.com/questions/45549361/react-add-remove-components-with-buttons-remove-not-working">React : Add / Remove components with buttons : Remove not working</a></p>