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?

vorillaz · Accepted Answer · 2016-06-07 18:31:46Z

2

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')
);

answered Jun 7, 2016 at 18:31

vorillaz

6,3062 gold badges32 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Dhara Over a year ago

I did same thing

render: function() {                      this.state.textboxes.map(function(answer, i) {                         return (                             <div className="space">                             <input key={i} type="text" className="inputControl"/>                              </div>                         );                     });                 }

but it shows A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object. error do you have any idea?

vorillaz Over a year ago

@debin Your code is dilated as hell, you are missing proper ES6 syntax and even more proper JSX syntax as well. Furthermore, the purpose of StackOverflow is to provide solid answers and paradigms instead of debugging code. One way or another take a look at how I refined your sample fiddle jsfiddle.net/69z2wepo/44901

Dhara Over a year ago

Thanks I got an idea..will message you if I need further help :)

Dhara Over a year ago

can I remove selected textbox directly by remove() ?

Community · Accepted Answer · 2017-05-23 12:32:58Z

1

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.

edited May 23, 2017 at 12:32

CommunityBot

11 silver badge

answered Jun 7, 2016 at 12:31

Michael Rasoahaingo

1,0896 silver badges11 bronze badges

1 Comment

Dhara Over a year ago

let me try then :)

Collectives™ on Stack Overflow

Add dynamic tag using reactjs

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related