Remove by index value from props array

Question

I am trying to remove a value by Index of the props array passed from another component.

[...this.props.data].splice([...this.props.data].indexOf(oldData), 1)
const {tableData, ...application} = oldData;
this.props.deleteData(application);

It deletes the data, but not just the selected value, but both values at the same time. I guess the problem is in the splice..indexOf

oldData :is the selected row that needs to be deleted.

You shouldn't modify props and remove the data from the parent state instead — Asaf Aviv
– Asaf Aviv, Commented Jul 17, 2019 at 15:32

adz5A · Accepted Answer · 2019-07-18 11:39:47Z

1

You need to concat from 0 to index - 1 and from index + 1 to length - 1. So a simple this.props.data.slice(0, index).concat(this.props.data.slice(index) + 1) Should work.

Imo concat is easier to read and reason about because it does not mutate your array.

A filter could also work for you:

 const filterIndex = target => (_, i) => i !== target;

 newData = data.filter(filterIndex(index));

To use the filter version is pretty easy, two ways, depending on the use case.

1) Remove a specific index without leaving holes in the array

const target = this.props.data.indexOf(oldData);
const newData = this.props.data.filter((_, index) => index !== target);

2) Remove a specific value from the array (all its occurrences) without leaving holes in the array

const newData = this.props.data.filter((data) => data !== oldData);

Those two are slightly different as the first one will only remove the first occurrence of oldData and the second all occurrences.

edited Jul 18, 2019 at 11:39

answered Jul 17, 2019 at 14:50

adz5A

2,03211 silver badges11 bronze badges

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

5 Comments

Mihail Over a year ago

To understand the code should be like this.

this.props.data.slice(0, this.props.data.indexOf(oldData) - 1).concat(this.props.data.slice(this.props.data.indexOf(oldData))

I tried and is not working.

adz5A Over a year ago

my bad, off by one error. I would recommend using the filter version much more explicit than the slice concat stuff.

Mihail Over a year ago

adz5A would you be able to show me how can I use your implementation with mine? by using props.

adz5A Over a year ago

I updated my answer, let me know if it is clearer for you. Have a nice day.

Mihail Over a year ago

Thanks fixed the problem, I added the value as a state and checked the nextProps, then set them up, if not matching, then implement your code. THanks

Collectives™ on Stack Overflow

Remove by index value from props array

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related