Have a useState hook like so:
const [array, updateArray] = useState([])
I know you can add items to the array using a spread operator like so.. (where item is whats being added)
updateArray(array => [...array, item])
how would you remove something from this array? Assuming you have the name of that array item. (remove based off value not index)
Thank you!
If you have a reference to the exact value that was inserted previously (say it's stored in a variable called itemToRemove), you can .filter it out:
updateArray(array.filter(item => item !== itemToRemove));
This works for both primitives and objects, but it's extremely strange to have an exact reference to an object currently in state. For objects, usually what you'll do is you'll need to figure out a way to identify the index of the element in state, probably with findIndex on a unique property, after which you'd set the new state to the array without that index, something like the following:
// say that the array contains objects with a unique 'id' property
// and you need to remove the item with the id of idToRemove
const index = array.findIndex(({ id }) => id === idToRemove);
if (index !== -1) {
updateArray([
...array.slice(0, index),
...array.slice(index + 1)
]);
}
Related
if I have an array like this:
const[arr,setArr] = React.useState([
{label:"dummy01",id:2},
{label:"dummy02",id:5},
])
is there anyway to update arr with such array:
const newArray = [{label:'dummy Altered01',id:2},{label:'different',id:10},{label:'different 02',id:55}}
what I expect to have an array like this :
[
{label:"dummy Altered01",id:2},
{label:"dummy02",id:5},
{label:'different',id:10},
{label:'different 02',id:55}
]
as you can see the object with the id of 2 is updated and other new objects are added to the array without erasing previous dummy02.
I don't know how should I compare id inside of two different arrays
I know this is not the best answer, so here's what I got
let listOfIds = newArray.map(item => item.id)
newArray = newArray.concat(arr.filter(item => !listOfIds.includes(item.id)))
First you map the newArray into a list of IDs.
Then newArray concatenates with the filtered original array (i.e. the array now doesn't have any items with ids in common with the latter )
Finally you update the state by setArr(newArr)
Hope this answers your question
Lets consider
a = [{label:"dummy01",id:2},{label:"dummy02",id:5}]
and new array is
b= [{label:'dummy Altered01',id:2},{label:'different',id:10},{label:'different 02',id:55}]
Now perform itearation over new array
b.forEach((item)=>{
let index = a.findIndex((x)=>x.id == item.id)
if(index > -1){
a[index].label = item.label
}
else
a.push(item)
})
console.log(a)
I have an object where each key is a unique id, and that keys value is an array of objects.
I have a prop, lets call it 'objId' whos value is one of the unique ids on the object
I want to map the array on the object where its key matches the prop 'objId'
To give a better visual example:
const bigObj = {
a123: [{status: 'happy'}, {status: 'moody'}]
a456: [{status: 'fail'}, {status: 'blah'}]
}
const objId = 'a123'
I want to map bigObj.a123 into my component because that matches the objId prop.
I'm kinda stuck and any ideas would help, can provide more info if needed as well.
You can access the object property like this:
const arr = bigObj[objId];
Then you can map it into whatever you need. You would also need to be careful and check if the array actually exists:
const mappedArray = arr?.map(item => "whatever you need to map it into");
Iterate the object keys
Object.keys(bigObj).map(key => {
//put your logic here for keys and values e.g. key, bigObj[key]
bigObj[key].map(obj => {
//put your logic here for nested array object
});
});
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 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.
I'm new to ES6 and ReactJS. I need some help to filter out the results in array, in a way, where I can check if the index matches, only then call the function createOptions().
Actual code :
const newArr = items
.filter(this.isEligible(selectedIndex))
.filter((item, index) => this.createOptions(item, index, selectedItem));
Need something like(expected)):
const newArr = items
.filter(this.isEligible(selectedIndex))
.filter((item, selectedIndex) => selectedIndex || selectedIndex+ 2 ? this.createOptions(item, selectedIndex, selectedItem));
Here, I need to filter out the results when the index equals selectedIndex or selectedIndex+2, then call createOptions(item, index, selectedItem);
But, I'm getting some syntax error while trying to do that.
Could you please help me fix that?
If you want to access item at specific index in array, you don't need to filter that array. Just access it by bracket notation:
const itemAtIndex = items[selectedIndex]
const itemAtIndexPlusTwo = items[selectedIndex + 2]
seemed like a simple task but im finding it hard to achive.
I have object containing child objects, and while looping over them i would like to delete an inner object in based on value of one of it's fields (this field exists in every inner object).
the loop goes like this:
for (let old_item of this.updated_items) {
if (old_item['content_id'] === item.content_id) {
this.updated_items.***DELETE***(old_item)
}
}
I marked location where is the missing logic.
How would i delete old_item from this.updated_items?
ES6 if possible..thx
You can iterate the Object#entries, and when the correct content_id is found on the value, delete the key from the original object.
for (const [key, value] of Object.entries(this.updated_items)) {
if (value.content_id === item.content_id) {
delete this.updated_items[key];
}
}
Since Object#entries is not supported by some browsers, another option is to use Array#forEach to iterate the object's keys, and if the content_id is found delete the key from the original object:
Object.keys(this.updated_items) // get the object's keys
.forEach((key) => // iterate the keys
this.updated_items[key].content_id === item.content_id // if the content id is similar
&&
delete this.updated_items[key] //delete the key from the original object
)
You can use the filter function over an array, and convert your object to an array using Array.from:
this.update_items = Array.from(this.updated_items).fiter(old_item => old_item.content_id !== item.content_id)