React.js Bootstrap Add or Remove Input Fields
<p>I'm building a web app using <code>React.js</code> and <code>react-bootstrap</code>. I have a form page where the user can type in symptoms of a disease that they are experiencing. I want the user to be able to type in text and also have the option to remove previously typed text.</p>

<p>An example of it being done in Javascript is here:
<a href="http://bootsnipp.com/snippets/featured/dynamic-form-fields-add-amp-remove-bs3" rel="nofollow">http://bootsnipp.com/snippets/featured/dynamic-form-fields-add-amp-remove-bs3</a></p>

<p>I would like to have the same feature as the link above but using React. Here's the code I have so far for the section, but I'm unsure of the best way to continue. </p>

<pre><code>var closeButton = &lt;Button onClick={this.removeSymptomField()}&gt;Close&lt;/Button&gt;;

&lt;Input type="text" buttonAfter={closeButton} placeholder="Type a symptom here."/&gt;

&lt;Button onClick={this.addSymptomField()}&gt;Click to add a new symptom.&lt;/Button&gt;
</code></pre>

<p>When <code>this.addSymptomField()</code> is called, I want to add an <code>Input</code> field to the page, and when <code>this.removeSymptomField()</code> is called, I want to remove the existing <code>Input</code> field from the page.</p>

<p>Thank you so much!</p>