What I want is to join my arrays that I get from my map function.
I tried to do with reduce :
const onFinish = (values) => {
values.fields.map((el, idx) => {
console.log({ ...el, index: idx }); // this `console.log` prints me one array after the other
}).reduce((acc, x) => {console.log(acc,x)}); // I tried with `reduce` but it prints me null
Also tried to do with useState:
const onFinish = (values) => {
values.fields.map((el, idx) => {
if (myArray === null){
setMyArray(() => {
return { ...el, index: idx };
});
}
else {
setMyArray(() => {
return {...myArray,...el, index: idx };
});
}
});
console.log(myArray) // at my first call to this const onFinish myArray is printed as [] and at the second it prints with the last object only
};
Someone knows how to get these objects joined/merged ?
Sample data the way that it's print:
How I want to be:
Altghough it is still not very clear from the screenshots (always prefer to use text and not images for data/code), it looks like you want
const onFinish = (values) => {
const updatedValues = values.fields.map((field, index) => ({...field, index}));
console.log( updatedValues );
}
Does this help?
if (myArray === null){
setMyArray(() => {
return [{ ...el, index: idx }];
});
}
else {
setMyArray(() => {
return [...myArray, {...el, index: idx }];
});
}
Related
I am using React. On click of a button, the following function is executed:
const completeTaskHandler = (idValue) => {
setData((prevData) => {
const updatedData = [...prevData];
const updatedItem = updatedData.filter((ele) => ele.id === idValue)[0];
updatedItem.completed = true;
const newData = updatedData.filter((ele) => ele !== updatedItem);
newData.unshift(updatedItem);
return newData;
});
};
My data is an array of objects like this:
[{userId: 1, id: 2, title: "task 1", completed: true}, .....].
Basically I want to move the updated item to the start of the array. Is there any better solution for this?
updatedItem should not be mutated. And this string const newData = updatedData.filter((ele) => ele !== updatedItem); is not fine. You can do it like this :
const completeTaskHandler = (idValue) => {
setData((prevData) => {
const targetItem = prevData.find((ele) => ele.id === idValue);
const updatedItem = { ...targetItem, completed: true };
const filteredData = prevData.filter((ele) => ele.id !== idValue);
return [updatedItem, ...filteredData];
});
};
Even better to reducing an extra filter:
const completeTaskHandler = (idValue) => {
setData((prevData) => {
const targetIndex = prevData.findIndex((ele) => ele.id === idValue);
return [{ ...prevData[targetIndex], completed: true }].concat(prevData.slice(0, targetIndex + 1)) .concat(
prevData.slice(targetIndex + 1)
)
});
};
First find index of updated element using Array.findIndex(), then remove the same element using Array.splice() and add it to front of the array.
const completeTaskHandler = (idValue) => {
setData((prevData) => {
const updatedData = [...prevData];
const index = updatedData.findIndex(obj => obj.id === idValue);
const [updatedItem] = updatedData.splice(index, 1);
updatedItem.completed = true;
updatedData.unshift(updatedItem);
return updatedData;
});
};
The simplest one with only one forEach.
const completeTaskHandler = idValue => {
setData(prevData => {
let updatedItem = {}, newData = [];
prevData.forEach((ele) => {
if (ele.id === idValue) {
updatedItem = ele;
updatedItem.completed = true;
} else {
newData.push(ele);
}
});
newData.unshift(updatedItem);
return newData;
});
};
I have an Array that looks like this:
I need the id where slug === 'slug'
let activeFaq = this.faq.filter(obj => obj.items.filter(item => item.slug === 'slug'));
console.log(activeFaq.id);
This gives me an undefined. I should get 2729
There are multiple ways you could go about this. If you can use .flatMap, then one solution would be to flatten all items into a single array and then use .find:
const item = this.faq.flatMap(obj => obj.items).find(item => item.slug === 'slug')
However, flattening seems a bit unnecessary. An approach that avoid unnecessary computations would be a helper function with a boring loop:
function findItem(faqs, callback) {
for (const faq of faqs) {
const item = faq.find(callback);
if (item) {
return item;
}
}
}
const activeFaq = findItem(this.faq, item => item.slug === 'slug');
var activeFaq = this.faq.filter(obj => obj.items.some(item => item.slug === 'slug'))[0];
console.log(activeFaq.items[0].id); //2729
let activeFaq = this.faq.reduce( ( obj ) => {
const foundItem = obj.items.find( ( item ) => {
return item.slug === 'slug'
} )
if( foundItem ) {
acc = foundItem
}
return acc
}, null )
console.log(activeFaq.id);
i try to return all object the !== from the object that i deleted now and the filter delete all object with the same name that i clicked.
In my application it is possible to have several identical objects and I want that at the moment of deletion it will be deleted only 1.
here the code
handleClick = packageID => {
let array = [];
packageMethods
.deletePackageFromUser(packageID, this.props.userID)
.then(res => {
packageMethods.findPackage(packageID).then(temppackage => {
array = this.state.package.filter(item => {
return item._id !== temppackage.data[0]._id;
});
this.setState({
package:array
})
});
});
};
You want to find the index of the first instance of an object with that id, then remove the item at that index.
handleClick = packageID => {
let array = [...this.state.package];
packageMethods
.deletePackageFromUser(packageID, this.props.userID)
.then(res => {
packageMethods.findPackage(packageID).then(temppackage => {
const removal_index = array.findIndex(item => {
return item._id === temppackage.data[0]._id;
});
array.splice(removal_index, 1);
this.setState({
package: array
})
});
});
};
Here's an example
const arr = [{id: 1, val: 'a'}, {id: 1, val: 'a'}, {id: 2, val: 'b'}];
console.log(arr);
const removal_index = arr.findIndex(el => el.id == 1); // find index of first object with id of 1
arr.splice(removal_index,1); // remove 1 element starting at `removal_index`
console.log(arr);
I've got add
I've got delete
now I need modify
add just adds to the pile haphazardly
delete is able to do it's work with surgical precision because it uses key to find it's culprit :
addInput = (name) => {
const newInputs = this.props.parameters;
newInputs.push({
name,
key: uuid(),
value: { input: '' },
icon: { inputIcon: 0 },
});
this.setState({
newInput: newInputs,
});
this.props.exportParameter(newInputs);
};
removeInput = (key) => {
const newInputs = this.props.parameters.filter(x => x.key !== key);
this.setState({
newInput: newInputs,
});
this.props.exportParameter(newInputs);
};
how do I modify (for example set the value back to '' without deleting and recreating the item) ?
modifyInput = (key) => {
?????
};
You can use Array.prototype.find()
modifyInput = (key) => {
const match = this.props.parameters.find(x => x.key === key);
// do stuff with matched object
};
You can map through the parameters and then modify when you find a match:
modifyInput = (key) => {
const newInputs = this.props.parameters.map(x => {
if (x.key === key) {
x.modification = true;
}
return x;
});
this.setState({
newInput: newInputs,
});
this.props.exportParameter(newInputs);
};
var empMap= {};
//initialize empMap with key as Employee ID and value as Employee attributes:
//Now when salary updated on UI from 100 - 300 you can update other fields
var e=empMap[id];
if(e){
e.Salary=newSalary;
e.YearlySalary = newSalary*12;
e.Deductions = e.YearlySalary*0.2;
empMap[id]=e;
}
I've got add
I've got delete
now I need modify
add just adds to the pile haphazardly
delete is able to do it's work with surgical precision because it uses key to find it's culprit :
addInput = (name) => {
const newInputs = this.props.parameters;
newInputs.push({
name,
key: uuid(),
value: { input: '' },
icon: { inputIcon: 0 },
});
this.setState({
newInput: newInputs,
});
this.props.exportParameter(newInputs);
};
removeInput = (key) => {
const newInputs = this.props.parameters.filter(x => x.key !== key);
this.setState({
newInput: newInputs,
});
this.props.exportParameter(newInputs);
};
how do I modify (for example set the value back to '' without deleting and recreating the item) ?
modifyInput = (key) => {
?????
};
You can use Array.prototype.find()
modifyInput = (key) => {
const match = this.props.parameters.find(x => x.key === key);
// do stuff with matched object
};
You can map through the parameters and then modify when you find a match:
modifyInput = (key) => {
const newInputs = this.props.parameters.map(x => {
if (x.key === key) {
x.modification = true;
}
return x;
});
this.setState({
newInput: newInputs,
});
this.props.exportParameter(newInputs);
};
var empMap= {};
//initialize empMap with key as Employee ID and value as Employee attributes:
//Now when salary updated on UI from 100 - 300 you can update other fields
var e=empMap[id];
if(e){
e.Salary=newSalary;
e.YearlySalary = newSalary*12;
e.Deductions = e.YearlySalary*0.2;
empMap[id]=e;
}