reactjs Remove element from array in render method

Question

I have an array in my state called columnToFilterOut. Let's say this is my array in my state: columnToFilterOut = ["first_col", "second_col", "third_col"]

I also have another array in state called rows that contains a list of dicts where there is a key called id that is corresponding to the values in columnToFilterOut. Here is an example of rows:

rows: [
    {
      id: "first_col",
      numeric: false,
      disablePadding: true,
      label: "1"
    },
    {
      id: "second_col",
      numeric: true,
      disablePadding: false,
      label: "2"
    },
    {
      id: "third_col",
      numeric: true,
      disablePadding: false,
      label: "3"
    },
    {
      id: "fourth_col",
      numeric: true,
      disablePadding: false,
      label: "4"
    }
]

As you can see, there is an extra element in there. The extra value is the one with id = "fourth_col". I want to delete all elements to make sure that both arrays match up.

Here is my delete function:

removeFromRowsById(id) {
    console.log("IN REMOVE FUNCTION");
    const filteredValues = this.state.rows.filter((_, i) => i["id"] !== id);
    this.setState({ rows: filteredValues });

}

So I pass in an id and it should remove the value with the given id. Inside my render function, I use it like this:

Object.keys(rows).map(
  (key, index) =>
    !(columnToFilterOut.indexOf(rows[index]["id"]) > -1) //meaning the value doesn't exist inside of columnToFilterOut
      ? this.removeFromRowsById.bind(this, rows[index]["id"])
      : console.log("Not deleting")
);

This isn't working. The value in the rows array is never removed. I print it to make sure. I also notice that my print statement inside of removeFromRowsById never logs to the console as though the function never actually gets called. Any help is great. Thanks!

vdj4y · Accepted Answer · 2018-10-20 21:31:03Z

1

try to change your this.state.rows.filter, to be like below. and see if it works

removeFromRowsById(id) {
   console.log("IN REMOVE FUNCTION");
   // 1. the original code should be === not !==, because you want to delete when the id matches.
   // 2. the "i" should be on first parameter not second
   const filteredValues = this.state.rows.filter((i, _) => i["id"] === id); 
   this.setState({ rows: filteredValues });
}

edited Oct 20, 2018 at 21:31

answered Oct 17, 2018 at 12:51

vdj4y

2,6692 gold badges24 silver badges32 bronze badges

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

3 Comments

tee Over a year ago

It seems like that didn't work. "IN REMOVE FUNCTION" never gets printed at all

tee Over a year ago

could it be the way I'm calling the function in the render method?

vdj4y Over a year ago

the i should be on first parameter because second parameter is index(Number). you are assign i to index. then you try to access a number. i["id"].. I wonder why it does not crash? please check you console

tee · Accepted Answer · 2018-10-18 11:51:43Z

0

I changed the removeFromRowsById to look like this:

removeFromRowsById = index => {
  console.log("IN REMOVE FUNCTION");
  const newList = [...this.state.rows1];
  newList.splice(index, 1);

  this.setState(state => ({
    rows1: newList
  }));
};

And I call it regularly in the render function (without the binding). I think you needed to use the arrow function which fixed the issue and I revamped the way it deletes from the list in case what @vdj4y said was true

edited Oct 18, 2018 at 11:51

tee

1,3464 gold badges19 silver badges40 bronze badges

answered Oct 18, 2018 at 11:47

jim

1,1364 gold badges17 silver badges45 bronze badges

1 Comment

vdj4y Over a year ago

hmm, this actually not optimized because it is double loop, clone an array and delete it. I edited my answer, the filter should work.

Collectives™ on Stack Overflow

reactjs Remove element from array in render method

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related