Delete functionality is not working properly-Reactjs

Question

i have created delete functionality,in which when user clicks delete[X] it has to get deleted from the respected row w.r.t datagrid view used in react

passing id as an parameter used _find index(loadlash)

problem:

1) selected Rows are not getting deleted.

code:

onclick event

      <div>
        <button onClick={() => this.deleteHandler(params.value)}>X</button>
      </div>

Delete code:

 deleteHandler = (id) => {
 const arrayPerson = this.props.rowData;
 const index = _.findIndex(this.props.rowData, { id: id });
 if (arrayPerson.indexOf(id) > -1) {
   arrayPerson.splice(index, 1);
   this.setState({ rows: arrayPerson });
 }

can any one help me on this issue.

if i click on delete[x] its not getting deleted and there are few empty rows if i click on that index =0.... after clicking on empty row and again if i click on data it shows index as -1 — R9102
– R9102, Commented Feb 1, 2018 at 14:05

Imran Qureshi · Accepted Answer · 2018-02-01 16:39:18Z

1

This is a working example for this what if different is that you are passing the data from parent to child for that u can do multiple thing.

The Parent Component.

class TestComp extends React.Component {
constructor() {
    super();
    this.state = { listItems: [{ id: 1, text: "abc" }, { id: 2, text: "bcd" }, { id: 3, text: "dec" }] }
    this.handleRowClick = this.handleRowClick.bind(this);
}
handleRowClick(id) {

    const listItems = this.state.listItems;
    let copyListItems = [];
    listItems.forEach(function (item) {
        let objCopy = Object.assign({}, item);
        copyListItems.push(objCopy);
    });
    let updatedArray = _.remove(copyListItems, function (item) { return item.id == id; });

    this.setState({ listItems: copyListItems });
}
render() {

    return (
        <div>
            <ChildComp
                list={this.state.listItems}
                deleteHandler={this.handleRowClick}
            />
        </div>
    )
}
}

The Child Component that is receiving List items as props and when clicked the parent handler is being called which will update the List items and setState of Parent which will update the list being provided to child component hence it will be rendered.

export class ChildComp extends React.Component {

render() {
    let list = this.props.list.map((obj) =>
        <div key={obj.id} id={obj.id} style={{ padding: "10px", backgroundColor: "grey", border: "1px solid black" }} onClick={() => { this.props.deleteHandler(obj.id) }}> {obj.text} </div>
    );
    return (
        <div >
           {list}
        </div>
    )
}
}

edited Feb 1, 2018 at 16:39

answered Feb 1, 2018 at 15:46

Imran Qureshi

1681 silver badge10 bronze badges

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

7 Comments

R9102 Over a year ago

no i have not used this.state.rows......rows={this.props.rowData} these are only properties

Imran Qureshi Over a year ago

you are setting the updated Rows in this.setState to rows.. now your this.state.rows contains the updated rows. u need to render them in order for the view to change otherwise , the render method will keep showing the output of original rows. also u should not mutate state or props

R9102 Over a year ago

if we set "this.state .rows "in dataGrid it throws an error(TypeError: Cannot read property 'rowData' of null);

Imran Qureshi Over a year ago

because you are receiving props from the parent. you need to set them in your state of your component because you are going to change them ..

Imran Qureshi Over a year ago

sure i will give u a simple example ryt now

|

Collectives™ on Stack Overflow

Delete functionality is not working properly-Reactjs

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related