In the process of developing a web application using React.js and react-bootstrap, I encountered an interesting challenge. On one of the form pages, users should be able to input symptoms of an illness they are dealing with. The key functionality required is for users to type in text while also having the option to remove any previously entered text.
A helpful example showcasing this behavior in Javascript can be found at:
I aim to implement a similar feature using React framework. Here is what I have so far, but I am seeking guidance on how to proceed:
var closeButton = <Button onClick={this.removeSymptomField()}>Close</Button>;
<Input type="text" buttonAfter={closeButton} placeholder="Type a symptom here."/>
<Button onClick={this.addSymptomField()}>Click to add a new symptom.</Button>
Upon invoking this.addSymptomField(), my objective is to append a new Input field to the page. Conversely, triggering this.removeSymptomField() should result in removing the current Input field from view.
Your insights and advice would be greatly appreciated!