How to delete a specific textfield inside a table onclick of a button using reactjs & material ui

user_13491402 0
Viewed 313

I want to delete textfield on a specific row inside a table whenever the specific row delete button is clicked, currently I am able to add text field onclick of add button and I'm able to delete the textField onclick of remove button but whenever the remove button is clicked all the textfields are getting deleted instead of the specific textfield Also the add icon needs to be next to the last text field but currently I could only achieve it having it on the 1st text field. Please someone help me out here. Image of what i have achieved so far.

enter image description here

As you can see I'm trying to delete textfields on 1st row ,but it is automatically deleting textfields in every row of table.

Working codesandbox: https://codesandbox.io/s/heuristic-fermat-63ixw?file=/src/App.js

Can someone please helpme out

material-ui reactjs ecmascript-6 arrays javascript
2 Answers

I read your code, and it is working fine.

One thing you would like to add is the index of text inputs in a single row.

Problem

Currently, if user presses + button three times, addCustomFile will add three elements to state.customRow. However, three of these elements are identical, and there is nothing to distinguished from each other.

That is why the filter function (which is executed when X button is pressed) will remove all the elements inside state.customRow that belongs to same row.

Solution

I suggest you to add a new attribute to elements of state.customRow to distinguish added inputs of a same row. For example, it could be insideRowIndex and each added input can have incrementing integer (0,1,2,3,4 ...).

Checking insideRowIndex inside the filter function will let you to only remove the input you intend to, not all the others that belong to same function.

user_159582740

Issue

You are adding multiple custom rows all with the same rowId, so when you filter them you are removing more than you want.

You also incorrectly compare a newRow.rowId against this.state.customRow.rowId which is of course undefined since it's an array, and update your state to nest customRow into another array.

handlingDeleteRow = (index, newRow) => {
  let newdel = this.state.customRow.filter(
    (newRow) => newRow.rowId !== this.state.customRow.rowId // <-- incorrect comparison
  );
  this.setState({
    customRow: [newdel] // <-- nest array in array
  });
  console.log(this.state.customRow);
};

Solution

I suggest adding a guid to your added custom rows and matching on that.

import { v4 as uuidV4 } from 'uuid';

...

addCustomFile = (index) => {
  this.setState({
    resError: null,
    customRow: [
      ...this.state.customRow,
      { rowId: index, fileData: false, fileName: false, guid: uuidV4() }
    ]
  });
};

When deleting use the new guid property.

handlingDeleteRow = (index, newRow) => {
  let newdel = this.state.customRow.filter(
    (row) => row.guid !== newRow.guid
  );
  this.setState({
    customRow: newdel
  });
};

Demo

Edit how-to-delete-a-specific-textfield-inside-a-table-onclick-of-a-button-using-reac

user_86908570
Related