Add dynamic tag using reactjs

Question

I have textbox with plus and minus symbole that can add new textbox and remove clicked textbox accordingly.. I want to add on onclick of plus using reactjs.. I can hide selected textbox(for this function is:removeChoice) but cannot add textbox (for that function is : addChoice)

 var MySelect = React.createClass({
                    getInitialState: function() {
                        return {
                            value: '',
                            label: ''
                        }
                    },
                    change: function(event) {
                        this.setState({value: event.target.value});                  
                    },
                    textChange: function(event) {                    
                        this.setState({label: event.target.value});                    
                    },
                    addChoice: function(event) {
                        var a = event.currentTarget.parentNode.parentNode;
                        $(a).append(); //HERE
                    },
                    removeChoice: function(event) {
                        var a = event.currentTarget.parentNode;
                        $(a).css('display','none');
                    },
                    render: function(){
                        if($('.selected').length >0 && $('.selected').find('th').length>0 && this.state.label!=''){ $('.selected').find('th')[0].innerHTML = this.state.label; }
                        if($('.selected').length >0 && $('.selected').find('td').length>0 && this.state.value!='') {
                            if(this.state.value == "textarea") $('.selected').find('td')[0].innerHTML = '<textarea rows="4" cols="20"></textarea>'; 
                            else if(this.state.value == "select") $('.selected').find('td')[0].innerHTML = "<select style='width: 40%'><option></option</select>"; 
                            else $('.selected').find('td')[0].innerHTML = '<input type="'+this.state.value+'"/>'; 
                            if(this.state.value != "select") $('#selectOption').hide();
                        }
                        return(
                            <div>
                              <p>Field label</p>
                              <textarea rows="3" cols="30" className="inputControl" id="field_name" onChange={this.textChange}></textarea><br />
                              <br />
                              <p>Field type</p>
                                <select className="inputControl" id="field_control" onChange={this.change} value={this.state.value}>                        
                                    <option value="text">Textbox</option>
                                    <option value="number">Number</option>
                                    <option value="checkbox">Checkbox</option>
                                    <option value="radio">Radio</option>
                                    <option value="textarea">Textarea</option>
                                    <option value="select">Dropdown</option>
                                    <option value="date">Date</option>
                                    <option value="email">Email</option>
                                </select>
                            <br />
                            <br />
                            <div id="selectOption" style={{display: 'none'}}>
                                <p>
                                    Choices
                                </p>
                                <div className="space">
                                    <input type="text" className="inputControl" /></div>
                                <div className="space">
                                    <input type="text" className="inputControl" />
                                    <i className="fa fa-plus-circle icon add" title="Add another choice" onClick={this.addChoice} ></i><i className="fa fa-minus-circle icon remove" onClick={this.removeChoice} 
                                        title="Delete this choice"></i>
                                </div>
                                <div className="space">
                                    <input type="text" className="inputControl" />
                                    <i className="fa fa-plus-circle icon add" title="Add another choice" onClick={this.addChoice} ></i><i className="fa fa-minus-circle icon remove" onClick={this.removeChoice}
                                        title="Delete this choice"></i>
                                </div>
                            </div>                  
                         </div>
                    );
                }
            });

can anyone suggest how to add dynamically textbox?

Answer 1

You should definitely avoid manipulating the DOM using instant selectors or hiding a component using CSS. React takes care of how the DOM is rendered based on an isolated state. Furthermore, you have to take care of it's declared component's lifecycle methods. Instead, you may keep track on the desired data using the state. Here is a fairly simple example :

https://jsfiddle.net/reactjs/69z2wepo/

var Hello = React.createClass({
  getInitialState: function() {
    return {
      textboxes:[{value:'foo'}]
    }
  },
  addNew:function(){
    const textboxes = this.state.textboxes;
    textboxes.push({value: 'hello'});
    this.setState({ textboxes : textboxes });
  },
  render: function() {
    return (<div > 
    {
        this.state.textboxes.map( (item, i) => <input key={i} type="text" value={item.value} />)
    }
    <button onClick={this.addNew}>Add a new one</button>
    < /div>);
  }
});

ReactDOM.render( < Hello / > ,
  document.getElementById('container')
);

Answer 2

Hmmmm, I have already faced this same request here

The goal is to manage the dynamic list of an Item via a number that will be incremented or decremented. Hope it will help you.