React Dynamic Row Input Value Remained After Remove

I have a problem with below code export class MultipleInput extends React.Component { constructor(props) { super(props); this.state = { rowCount: 1 }; } add

Solution 1:

importReactfrom"react";
importReactDOM from"react-dom";

exportclassMultipleInputextendsReact.Component {
  state = {
    rowCount: 1
  };
  addRow = () => {
    this.setState(({ rowCount }) => ({
      rowCount: rowCount + 1,
    }));
  };
  deleteRow = () => {
    this.setState(({ rowCount }) => ({
      rowCount: rowCount - 1,
    }));
  };

  renderRow = i => {
    const { type, value } = this.props;
    const { rowCount } = this.state;
    return (
      <div><inputtype={type}value={value} /><buttononClick={this.addRow}>add</button>
        {rowCount > 1 && <buttononClick={this.deleteRow}>delete</button>}
      </div>
    );
 };
 render() {
    const { rowCount } = this.state;
    returnArray(rowCount).fill(1).map(i =>this.renderRow(i));
 }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<MultipleInput />, rootElement);

Things to note

You need to increment/decrement your state like as above add on the previous state to update the current state;

In render I created a new array which has rowCount no. of elements, to map over the renderRow method. You don't need lodash for this.

Also the delete button will now be shown, when there is more then one input field in this component. i.e, {rowCount > 1 && <button onClick={this.deleteRow}>delete</button>}

Solution 2:

You are reducing the array size by 1 when delete is clicked, it will always remove the last row no matter which delete button you clicked since you removed the last element of the array. You need to give a unique id to each row and delete the element with that id from the array, not the last element. Use map function the following way

Array.map((i,idx)=>{this.renderRow(i, idx)})

Now you have a unique incrementing number passed to the renderRow function every time you call it so this number can be used as the id. Pass this id to the input field in the renderRow function

<inputtype={type}value={value}id={idx} />

Instead of row count, you could maintain an array of these ids, so if you have 1 row, all your array has is the first id which is [0], and for 2 rows [0,1] and so on.

Now when you click delete, pass the id, and remove that specific id from the DOM

deleteRow= (idx) => {
     var elem = document.getElementById(idx);
     if (elem.parentNode) {
         elem.parentNode.removeChild(elem);
     }
 this.setState({//Here you can reduce the row count
                        });
        }