Adding and removing input fields in Reactjs with values not reseting

Question

Hi i am working on a React application where there are four options.when a user select an option corresponding input element will be added to the wrapper.In the following code add operation works fine but remove operation is not working properly ,it is not removing the corresponding element.Another problem the values on the inputs fields not present when the component re-renders.so experts guide me how i can acheive removing the corresponding row when the remove button is clicked and the input values should not be reset when the component re-renders

import React from 'react';
import ReactDOM from 'react-dom';

var fields = "";
var options = ['one','two','three','four','five','six','seven','eight','nine','Ten','eleven','twelve'];

var SelectOptions = React.createClass({
    render:function(){
        var options = this.props.options;
        return (
             <select>
                   {options.map(function(col,index){
                       return (
                         <option key={index} value ={col}> {col} </option>
                       );
                   })}
             </select>
        );

    }
});

var PriceMultiply = React.createClass({
    render:function(){
        return (
           <tr>
             <td>
               Adjust Price Multiply
             </td>
             <td>
               Multiply <SelectOptions options={options} />
             </td>
             <td>
               by <input type="text" name="" />
             </td>
             <td>
               <button className="btn btn-danger" onClick={this.props.removeOperation} > Remove </button>
             </td>
           </tr>           
        );
    }
});

var PriceAdd = React.createClass({
    render:function(){
        return (
           <tr>
             <td>
               Adjust Price (Add)
             </td>
             <td>
               Add <input type="text" name="" />
             </td>
             <td>
               to <SelectOptions options={options} />
             </td>
             <td>
               <button className="btn btn-danger" onClick={this.props.removeOperation} > Remove </button>
             </td>
           </tr>           
        );
    }
});

var ExcludeProducts = React.createClass({
    render:function(){
        return (
           <tr>
             <td>
               Filter Products (Includes) 
             </td>
             <td>
               Exclude Products Where <SelectOptions options={options} />
             </td>
             <td>
              Includes  <input type="text" name="" />
             </td>
             <td>
               <button className="btn btn-danger" onClick={this.props.removeOperation} > Remove </button>
             </td>
          </tr>             
        );
    }
});

var IncludeProducts = React.createClass({
    render:function(){
        return (
           <tr>
             <td>
               Filter Products (Includes) 
             </td>
             <td>
               Exclude Products Where <SelectOptions options={options} />
             </td>
             <td>
              does not equals <input type="text" name="" />
             </td>
             <td>
               <button className="btn btn-danger" onClick={this.props.removeOperation} > Remove </button>
             </td>
          </tr>
        );
    }
});

var DynamicFields = React.createClass({
    getInitialState:function(){
       return {
          operations:[]
       }
    },
    removeOperation:function(index){
        var operations = this.state.operations;
        operations.splice(index,1);
        this.setState({operations:operations});
    },
    addOperation:function(){
         var value = this.refs.operationsDropDown.value;
         this.setState({operations:this.state.operations.concat([value])});
    },
    renderAdjustmentRows:function(){

       fields = this.state.operations.map((operation,index) =>{
              if(operation == "adjust-price-multiply"){
                    return (<PriceMultiply key={index} removeOperation={this.removeOperation} />);
              }else if(operation == "adjust-price-add"){
                     return (<PriceAdd key={index} removeOperation={this.removeOperation} />);
              }else if(operation == "filter-products-includes"){
                      return (<IncludeProducts key={index} removeOperation={this.removeOperation} />);
              }else if(operation == "filter-products-excludes"){
                      return (<ExcludeProducts key={index} removeOperation={this.removeOperation} />);
              }
        });

       return (
           <table>
             <tbody>
              {fields}
             </tbody>
           </table>
       );
    },
    render:function(){
        return (
          <div>
            <select className="browser-default" ref="operationsDropDown" id="operations-drop-down">
              <option value="adjust-price-multiply"> Adjust Price (Multiply) </option>
              <option value="adjust-price-add"> Adjust Price (Add) </option>
              <option value="filter-products-includes"> Filter products (Includes) </option>
              <option value="filter-products-excludes"> Filter products excludes </option>
            </select>
            <button onClick={this.addOperation} > Add Operation </button>
            <div id="adjust-import-data-rows">
                 {this.renderAdjustmentRows()}
            </div>
          </div>
        );
    }
});

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

Kishore Barik · Accepted Answer · 2016-05-12 10:17:30Z

1

The problem is you are not providing index to the removeOperation function. Before you send the index your components should have the index. So pass it using index props as follows:

renderAdjustmentRows:function(){

   fields = this.state.operations.map((operation,index) =>{
          if(operation == "adjust-price-multiply"){
                return (<PriceMultiply key={index} index={index} removeOperation={this.removeOperation} />);
          }else if(operation == "adjust-price-add"){
                 return (<PriceAdd key={index} index={index} removeOperation={this.removeOperation} />);
          }else if(operation == "filter-products-includes"){
                  return (<IncludeProducts key={index} index={index} removeOperation={this.removeOperation} />);
          }else if(operation == "filter-products-excludes"){
                  return (<ExcludeProducts key={index} index={index} removeOperation={this.removeOperation} />);
          }
    });

And send the index props from remove button click of each Dynamic component. For that replace all the remove buttons with

 <button className="btn btn-danger" onClick={this.props.removeOperation.bind(null, this.props.index)} > Remove </button>

And you'll get what you want.

Complete code is available at https://jsfiddle.net/KishoreBarik/f8h3c82m/

answered May 12, 2016 at 10:17

Kishore Barik

7603 silver badges17 bronze badges

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

1 Comment

Hemakumar Over a year ago

I have checked the jsfiddle link jsfiddle.net/KishoreBarik/f8h3c82m , Remove is not working. While deleting first element removing the last element. I am facing the same Issue please someone help me to fix it.

wintvelt · Accepted Answer · 2016-05-12 07:08:27Z

0

Probably because in this bit of code:

removeOperation:function(index){
  var operations = this.state.operations;
  operations.splice(index,1);
  this.setState({operations:operations});
},

You are directly mutating state, as follows:

var operations = this.state.operations; // operations now points to array in state
operations.splice(index,1);             // splice mutates operations directly
// effect of these 2 statements is the same as
this.state.operations.splice(index,1);

You need to make a COPY of the state array first.
If you change the first line to:

var operations = this.state.operations.slice();

You should be fine..

answered May 12, 2016 at 7:08

wintvelt

14.1k3 gold badges41 silver badges44 bronze badges

Comments

Damien Leroux · Accepted Answer · 2016-05-12 07:10:53Z

0

For the removal issue: removeOperation() has not been given the index but an object. When you call it, give it an the right index

answered May 12, 2016 at 7:10

Damien Leroux

11.8k7 gold badges46 silver badges60 bronze badges

Collectives™ on Stack Overflow

Adding and removing input fields in Reactjs with values not reseting

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related