How to delete an object in an array of an object in an array?
I'm trying to create a function that deletes an object within a nested array of an object which is within an array...
How would I delete one of the schedules by date?
state = {
children: [
{
id: 1,
firstName: 'Bella',
lastName: 'Laupama',
profile: 'child_care',
schedules: [
{
date: '25 December, 2018',
parent: 'Chris',
activity: 'Christmas'
},
{
date: '28 December, 2018',
parent: 'Mischa',
activity: 'Christmas with Malane Whanau'
},
{
date: '31 December, 2018',
parent: 'Laura',
activity: 'New Years Eve'
},
{
date: '1 January, 2019',
parent: 'Laura',
activity: 'New Years Day'
}
]
}
]
}
Would something like this work?...
delSched = (firstName, date) => {
let children = [...this.state.children]
let findChild = children.find(child => child.firstName == firstName)
let newState = findChild.filter(sched => sched.date !== date)
this.setState({
children: newState
})
}
UPDATE:
Even though most of these solutions would most probably work, the one I could get working was thank you to @Marius. I used a modified version of his code.
delSched = (firstName, date) => {
var children = this.state.children
for (var i = 0; i < children.length; i++) {
var child = this.state.children[i]
if (child.firstName == firstName) {
//Loop through the schedules
for (var k = 0; k < child.schedules.length; k++) {
var schedule = child.schedules[k]
//remove schedule if date == date
if (schedule.date == date) {
child.schedules.splice(k, 1)
}
this.setState({children})
}
}
}
}
javascript reactjs
add a comment |
I'm trying to create a function that deletes an object within a nested array of an object which is within an array...
How would I delete one of the schedules by date?
state = {
children: [
{
id: 1,
firstName: 'Bella',
lastName: 'Laupama',
profile: 'child_care',
schedules: [
{
date: '25 December, 2018',
parent: 'Chris',
activity: 'Christmas'
},
{
date: '28 December, 2018',
parent: 'Mischa',
activity: 'Christmas with Malane Whanau'
},
{
date: '31 December, 2018',
parent: 'Laura',
activity: 'New Years Eve'
},
{
date: '1 January, 2019',
parent: 'Laura',
activity: 'New Years Day'
}
]
}
]
}
Would something like this work?...
delSched = (firstName, date) => {
let children = [...this.state.children]
let findChild = children.find(child => child.firstName == firstName)
let newState = findChild.filter(sched => sched.date !== date)
this.setState({
children: newState
})
}
UPDATE:
Even though most of these solutions would most probably work, the one I could get working was thank you to @Marius. I used a modified version of his code.
delSched = (firstName, date) => {
var children = this.state.children
for (var i = 0; i < children.length; i++) {
var child = this.state.children[i]
if (child.firstName == firstName) {
//Loop through the schedules
for (var k = 0; k < child.schedules.length; k++) {
var schedule = child.schedules[k]
//remove schedule if date == date
if (schedule.date == date) {
child.schedules.splice(k, 1)
}
this.setState({children})
}
}
}
}
javascript reactjs
Why are people downvoting? Please state a reason in comments.
– gatsbyz
Nov 21 '18 at 20:48
add a comment |
I'm trying to create a function that deletes an object within a nested array of an object which is within an array...
How would I delete one of the schedules by date?
state = {
children: [
{
id: 1,
firstName: 'Bella',
lastName: 'Laupama',
profile: 'child_care',
schedules: [
{
date: '25 December, 2018',
parent: 'Chris',
activity: 'Christmas'
},
{
date: '28 December, 2018',
parent: 'Mischa',
activity: 'Christmas with Malane Whanau'
},
{
date: '31 December, 2018',
parent: 'Laura',
activity: 'New Years Eve'
},
{
date: '1 January, 2019',
parent: 'Laura',
activity: 'New Years Day'
}
]
}
]
}
Would something like this work?...
delSched = (firstName, date) => {
let children = [...this.state.children]
let findChild = children.find(child => child.firstName == firstName)
let newState = findChild.filter(sched => sched.date !== date)
this.setState({
children: newState
})
}
UPDATE:
Even though most of these solutions would most probably work, the one I could get working was thank you to @Marius. I used a modified version of his code.
delSched = (firstName, date) => {
var children = this.state.children
for (var i = 0; i < children.length; i++) {
var child = this.state.children[i]
if (child.firstName == firstName) {
//Loop through the schedules
for (var k = 0; k < child.schedules.length; k++) {
var schedule = child.schedules[k]
//remove schedule if date == date
if (schedule.date == date) {
child.schedules.splice(k, 1)
}
this.setState({children})
}
}
}
}
javascript reactjs
I'm trying to create a function that deletes an object within a nested array of an object which is within an array...
How would I delete one of the schedules by date?
state = {
children: [
{
id: 1,
firstName: 'Bella',
lastName: 'Laupama',
profile: 'child_care',
schedules: [
{
date: '25 December, 2018',
parent: 'Chris',
activity: 'Christmas'
},
{
date: '28 December, 2018',
parent: 'Mischa',
activity: 'Christmas with Malane Whanau'
},
{
date: '31 December, 2018',
parent: 'Laura',
activity: 'New Years Eve'
},
{
date: '1 January, 2019',
parent: 'Laura',
activity: 'New Years Day'
}
]
}
]
}
Would something like this work?...
delSched = (firstName, date) => {
let children = [...this.state.children]
let findChild = children.find(child => child.firstName == firstName)
let newState = findChild.filter(sched => sched.date !== date)
this.setState({
children: newState
})
}
UPDATE:
Even though most of these solutions would most probably work, the one I could get working was thank you to @Marius. I used a modified version of his code.
delSched = (firstName, date) => {
var children = this.state.children
for (var i = 0; i < children.length; i++) {
var child = this.state.children[i]
if (child.firstName == firstName) {
//Loop through the schedules
for (var k = 0; k < child.schedules.length; k++) {
var schedule = child.schedules[k]
//remove schedule if date == date
if (schedule.date == date) {
child.schedules.splice(k, 1)
}
this.setState({children})
}
}
}
}
javascript reactjs
javascript reactjs
edited Nov 21 '18 at 22:19
Tearz
asked Nov 21 '18 at 20:42
TearzTearz
384
384
Why are people downvoting? Please state a reason in comments.
– gatsbyz
Nov 21 '18 at 20:48
add a comment |
Why are people downvoting? Please state a reason in comments.
– gatsbyz
Nov 21 '18 at 20:48
Why are people downvoting? Please state a reason in comments.
– gatsbyz
Nov 21 '18 at 20:48
Why are people downvoting? Please state a reason in comments.
– gatsbyz
Nov 21 '18 at 20:48
add a comment |
5 Answers
5
active
oldest
votes
Good ol' for loops. The newer Array prototypes are good, but not supported everywhere. Plus having it in a loop, you can change things if you need.
Working example:
var state = {
children: [
{
id: 1,
firstName: 'Bella',
lastName: 'Laupama',
profile: 'child_care',
schedules: [
{
date: '25 December, 2018',
parent: 'Chris',
activity: 'Christmas'
},
{
date: '28 December, 2018',
parent: 'Mischa',
activity: 'Christmas with Malane Whanau'
},
{
date: '31 December, 2018',
parent: 'Laura',
activity: 'New Years Eve'
},
{
date: '1 January, 2019',
parent: 'Laura',
activity: 'New Years Day'
}
]
}
]
}
var children = state.children;
for (var i = 0; i < children.length; i++) {
var child = state.children[i];
if (child.firstName == "Bella") {
//Loop through the schedules
for (var k = 0; k < child.schedules.length; k++) {
var schedule = child.schedules[k];
//remove schedule if date == date
if (schedule.date == "25 December, 2018") {
child.schedules.splice(k, 1);
}
}
}
}
console.log(state);
YES! thank you so much @Marius, this worked perfectly with slight modifications... I will edit my original post to show the modification.
– Tearz
Nov 21 '18 at 22:16
add a comment |
Your code fixed:
delSched = (firstName, date) => {
const children = state.children;
const findChild = children.find(child => child.firstName === firstName)
const newSched = findChild.filter(sched => sched.date !== date)
findChild.schedules = newSched;
}
1
Thank you for the reply Gatsby, how would I return this to state? - The 5th line sort of confuses me on what to do?
– Tearz
Nov 21 '18 at 21:01
@Tearz When you change a reference to an object, it will also change the actual object.findChild.schedules = newSched;
will changestate.children[0 or whatever].schedules
– gatsbyz
Nov 21 '18 at 21:05
it seems to crash when I try and use this? - would you mind maybe having a look for me if I gave you the repo?
– Tearz
Nov 21 '18 at 21:10
@Tearz Yes. I will.
– gatsbyz
Nov 21 '18 at 21:11
add a comment |
It should work, with a small correction:
delSched = (firstName, date) => {
let children = [...this.state.children]
let findChild = children.find(child => child.firstName == firstName)
let newState = findChild;
newState.schedules = newState.schedules.filter(sched => sched.date !== date)
this.setState({
children: newState
})
}
Your findChild
is the object that contains the schedules
array, you need to go one level deeper to grab the array and use filter
on it
Thanks Velimir, but I think this seems to delete the schedules as a whole? After I do this, it crashes the schedules.map within a parent component.
– Tearz
Nov 21 '18 at 21:00
state does not equal findChild.schedules. It should not be placing it there.
– gatsbyz
Nov 21 '18 at 21:07
add a comment |
You can also make it slightly shorter by doing something like this:
let state = { children: [{ id: 1, firstName: 'Bella', lastName: 'Laupama', profile: 'child_care', schedules: [{ date: '25 December, 2018', parent: 'Chris', activity: 'Christmas' }, { date: '28 December, 2018', parent: 'Mischa', activity: 'Christmas with Malane Whanau' }, { date: '31 December, 2018', parent: 'Laura', activity: 'New Years Eve' }, { date: '1 January, 2019', parent: 'Laura', activity: 'New Years Day' } ] }] }
const delSchedule = (arr, name, date) => {
let f = arr.find(x => x.firstName == name)
f.schedules = f ? f.schedules.filter(y => y.date != date) : f.schedules
}
this.setState({
children: delSchedule(this.state.children, 'Bella', '1 January, 2019')
})
This way delSchedule
is not modifying the state but returns the new one which you assign in this.setState
etc.
Thank you @Akrion for your response, however, I'm really struggling to find a way to make this work as I'm not sure how to make this work without it being just one single function?
– Tearz
Nov 21 '18 at 21:29
Not sure I understand ... you want to change the state insidedelSchedule
?
– Akrion
Nov 21 '18 at 21:31
Kind of yeah, I'm setting the state from within the function, much like this... delSched = (firstName, date) => { let children = [...this.state.children] let findChild = children.find(child => child.firstName == firstName) let newState = findChild; newState.schedules = newState.schedules.filter(sched => sched.date !== date) this.setState({ children: newState }) }
– Tearz
Nov 21 '18 at 21:34
add a comment |
You probably searched for sth like:
delSched = (firstName, date) => {
let newChildren = this.state.children.map( child => {
// don't modify other people
if( child.firstName != firstName ) return child;
// new object
let newChild = {...child}
// mutate schedule by date
newChild.schedules = child.schedules.filter(sched => sched.date !== date)
console.log(newChild);
return newChild
})
this.setState({
children: newChildren
}, () => console.log(this.state.children) )
}
Working code
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53420176%2fhow-to-delete-an-object-in-an-array-of-an-object-in-an-array%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
5 Answers
5
active
oldest
votes
5 Answers
5
active
oldest
votes
active
oldest
votes
active
oldest
votes
Good ol' for loops. The newer Array prototypes are good, but not supported everywhere. Plus having it in a loop, you can change things if you need.
Working example:
var state = {
children: [
{
id: 1,
firstName: 'Bella',
lastName: 'Laupama',
profile: 'child_care',
schedules: [
{
date: '25 December, 2018',
parent: 'Chris',
activity: 'Christmas'
},
{
date: '28 December, 2018',
parent: 'Mischa',
activity: 'Christmas with Malane Whanau'
},
{
date: '31 December, 2018',
parent: 'Laura',
activity: 'New Years Eve'
},
{
date: '1 January, 2019',
parent: 'Laura',
activity: 'New Years Day'
}
]
}
]
}
var children = state.children;
for (var i = 0; i < children.length; i++) {
var child = state.children[i];
if (child.firstName == "Bella") {
//Loop through the schedules
for (var k = 0; k < child.schedules.length; k++) {
var schedule = child.schedules[k];
//remove schedule if date == date
if (schedule.date == "25 December, 2018") {
child.schedules.splice(k, 1);
}
}
}
}
console.log(state);
YES! thank you so much @Marius, this worked perfectly with slight modifications... I will edit my original post to show the modification.
– Tearz
Nov 21 '18 at 22:16
add a comment |
Good ol' for loops. The newer Array prototypes are good, but not supported everywhere. Plus having it in a loop, you can change things if you need.
Working example:
var state = {
children: [
{
id: 1,
firstName: 'Bella',
lastName: 'Laupama',
profile: 'child_care',
schedules: [
{
date: '25 December, 2018',
parent: 'Chris',
activity: 'Christmas'
},
{
date: '28 December, 2018',
parent: 'Mischa',
activity: 'Christmas with Malane Whanau'
},
{
date: '31 December, 2018',
parent: 'Laura',
activity: 'New Years Eve'
},
{
date: '1 January, 2019',
parent: 'Laura',
activity: 'New Years Day'
}
]
}
]
}
var children = state.children;
for (var i = 0; i < children.length; i++) {
var child = state.children[i];
if (child.firstName == "Bella") {
//Loop through the schedules
for (var k = 0; k < child.schedules.length; k++) {
var schedule = child.schedules[k];
//remove schedule if date == date
if (schedule.date == "25 December, 2018") {
child.schedules.splice(k, 1);
}
}
}
}
console.log(state);
YES! thank you so much @Marius, this worked perfectly with slight modifications... I will edit my original post to show the modification.
– Tearz
Nov 21 '18 at 22:16
add a comment |
Good ol' for loops. The newer Array prototypes are good, but not supported everywhere. Plus having it in a loop, you can change things if you need.
Working example:
var state = {
children: [
{
id: 1,
firstName: 'Bella',
lastName: 'Laupama',
profile: 'child_care',
schedules: [
{
date: '25 December, 2018',
parent: 'Chris',
activity: 'Christmas'
},
{
date: '28 December, 2018',
parent: 'Mischa',
activity: 'Christmas with Malane Whanau'
},
{
date: '31 December, 2018',
parent: 'Laura',
activity: 'New Years Eve'
},
{
date: '1 January, 2019',
parent: 'Laura',
activity: 'New Years Day'
}
]
}
]
}
var children = state.children;
for (var i = 0; i < children.length; i++) {
var child = state.children[i];
if (child.firstName == "Bella") {
//Loop through the schedules
for (var k = 0; k < child.schedules.length; k++) {
var schedule = child.schedules[k];
//remove schedule if date == date
if (schedule.date == "25 December, 2018") {
child.schedules.splice(k, 1);
}
}
}
}
console.log(state);
Good ol' for loops. The newer Array prototypes are good, but not supported everywhere. Plus having it in a loop, you can change things if you need.
Working example:
var state = {
children: [
{
id: 1,
firstName: 'Bella',
lastName: 'Laupama',
profile: 'child_care',
schedules: [
{
date: '25 December, 2018',
parent: 'Chris',
activity: 'Christmas'
},
{
date: '28 December, 2018',
parent: 'Mischa',
activity: 'Christmas with Malane Whanau'
},
{
date: '31 December, 2018',
parent: 'Laura',
activity: 'New Years Eve'
},
{
date: '1 January, 2019',
parent: 'Laura',
activity: 'New Years Day'
}
]
}
]
}
var children = state.children;
for (var i = 0; i < children.length; i++) {
var child = state.children[i];
if (child.firstName == "Bella") {
//Loop through the schedules
for (var k = 0; k < child.schedules.length; k++) {
var schedule = child.schedules[k];
//remove schedule if date == date
if (schedule.date == "25 December, 2018") {
child.schedules.splice(k, 1);
}
}
}
}
console.log(state);
answered Nov 21 '18 at 22:07
MariusMarius
867
867
YES! thank you so much @Marius, this worked perfectly with slight modifications... I will edit my original post to show the modification.
– Tearz
Nov 21 '18 at 22:16
add a comment |
YES! thank you so much @Marius, this worked perfectly with slight modifications... I will edit my original post to show the modification.
– Tearz
Nov 21 '18 at 22:16
YES! thank you so much @Marius, this worked perfectly with slight modifications... I will edit my original post to show the modification.
– Tearz
Nov 21 '18 at 22:16
YES! thank you so much @Marius, this worked perfectly with slight modifications... I will edit my original post to show the modification.
– Tearz
Nov 21 '18 at 22:16
add a comment |
Your code fixed:
delSched = (firstName, date) => {
const children = state.children;
const findChild = children.find(child => child.firstName === firstName)
const newSched = findChild.filter(sched => sched.date !== date)
findChild.schedules = newSched;
}
1
Thank you for the reply Gatsby, how would I return this to state? - The 5th line sort of confuses me on what to do?
– Tearz
Nov 21 '18 at 21:01
@Tearz When you change a reference to an object, it will also change the actual object.findChild.schedules = newSched;
will changestate.children[0 or whatever].schedules
– gatsbyz
Nov 21 '18 at 21:05
it seems to crash when I try and use this? - would you mind maybe having a look for me if I gave you the repo?
– Tearz
Nov 21 '18 at 21:10
@Tearz Yes. I will.
– gatsbyz
Nov 21 '18 at 21:11
add a comment |
Your code fixed:
delSched = (firstName, date) => {
const children = state.children;
const findChild = children.find(child => child.firstName === firstName)
const newSched = findChild.filter(sched => sched.date !== date)
findChild.schedules = newSched;
}
1
Thank you for the reply Gatsby, how would I return this to state? - The 5th line sort of confuses me on what to do?
– Tearz
Nov 21 '18 at 21:01
@Tearz When you change a reference to an object, it will also change the actual object.findChild.schedules = newSched;
will changestate.children[0 or whatever].schedules
– gatsbyz
Nov 21 '18 at 21:05
it seems to crash when I try and use this? - would you mind maybe having a look for me if I gave you the repo?
– Tearz
Nov 21 '18 at 21:10
@Tearz Yes. I will.
– gatsbyz
Nov 21 '18 at 21:11
add a comment |
Your code fixed:
delSched = (firstName, date) => {
const children = state.children;
const findChild = children.find(child => child.firstName === firstName)
const newSched = findChild.filter(sched => sched.date !== date)
findChild.schedules = newSched;
}
Your code fixed:
delSched = (firstName, date) => {
const children = state.children;
const findChild = children.find(child => child.firstName === firstName)
const newSched = findChild.filter(sched => sched.date !== date)
findChild.schedules = newSched;
}
edited Nov 21 '18 at 21:01
answered Nov 21 '18 at 20:48
gatsbyzgatsbyz
194317
194317
1
Thank you for the reply Gatsby, how would I return this to state? - The 5th line sort of confuses me on what to do?
– Tearz
Nov 21 '18 at 21:01
@Tearz When you change a reference to an object, it will also change the actual object.findChild.schedules = newSched;
will changestate.children[0 or whatever].schedules
– gatsbyz
Nov 21 '18 at 21:05
it seems to crash when I try and use this? - would you mind maybe having a look for me if I gave you the repo?
– Tearz
Nov 21 '18 at 21:10
@Tearz Yes. I will.
– gatsbyz
Nov 21 '18 at 21:11
add a comment |
1
Thank you for the reply Gatsby, how would I return this to state? - The 5th line sort of confuses me on what to do?
– Tearz
Nov 21 '18 at 21:01
@Tearz When you change a reference to an object, it will also change the actual object.findChild.schedules = newSched;
will changestate.children[0 or whatever].schedules
– gatsbyz
Nov 21 '18 at 21:05
it seems to crash when I try and use this? - would you mind maybe having a look for me if I gave you the repo?
– Tearz
Nov 21 '18 at 21:10
@Tearz Yes. I will.
– gatsbyz
Nov 21 '18 at 21:11
1
1
Thank you for the reply Gatsby, how would I return this to state? - The 5th line sort of confuses me on what to do?
– Tearz
Nov 21 '18 at 21:01
Thank you for the reply Gatsby, how would I return this to state? - The 5th line sort of confuses me on what to do?
– Tearz
Nov 21 '18 at 21:01
@Tearz When you change a reference to an object, it will also change the actual object.
findChild.schedules = newSched;
will change state.children[0 or whatever].schedules
– gatsbyz
Nov 21 '18 at 21:05
@Tearz When you change a reference to an object, it will also change the actual object.
findChild.schedules = newSched;
will change state.children[0 or whatever].schedules
– gatsbyz
Nov 21 '18 at 21:05
it seems to crash when I try and use this? - would you mind maybe having a look for me if I gave you the repo?
– Tearz
Nov 21 '18 at 21:10
it seems to crash when I try and use this? - would you mind maybe having a look for me if I gave you the repo?
– Tearz
Nov 21 '18 at 21:10
@Tearz Yes. I will.
– gatsbyz
Nov 21 '18 at 21:11
@Tearz Yes. I will.
– gatsbyz
Nov 21 '18 at 21:11
add a comment |
It should work, with a small correction:
delSched = (firstName, date) => {
let children = [...this.state.children]
let findChild = children.find(child => child.firstName == firstName)
let newState = findChild;
newState.schedules = newState.schedules.filter(sched => sched.date !== date)
this.setState({
children: newState
})
}
Your findChild
is the object that contains the schedules
array, you need to go one level deeper to grab the array and use filter
on it
Thanks Velimir, but I think this seems to delete the schedules as a whole? After I do this, it crashes the schedules.map within a parent component.
– Tearz
Nov 21 '18 at 21:00
state does not equal findChild.schedules. It should not be placing it there.
– gatsbyz
Nov 21 '18 at 21:07
add a comment |
It should work, with a small correction:
delSched = (firstName, date) => {
let children = [...this.state.children]
let findChild = children.find(child => child.firstName == firstName)
let newState = findChild;
newState.schedules = newState.schedules.filter(sched => sched.date !== date)
this.setState({
children: newState
})
}
Your findChild
is the object that contains the schedules
array, you need to go one level deeper to grab the array and use filter
on it
Thanks Velimir, but I think this seems to delete the schedules as a whole? After I do this, it crashes the schedules.map within a parent component.
– Tearz
Nov 21 '18 at 21:00
state does not equal findChild.schedules. It should not be placing it there.
– gatsbyz
Nov 21 '18 at 21:07
add a comment |
It should work, with a small correction:
delSched = (firstName, date) => {
let children = [...this.state.children]
let findChild = children.find(child => child.firstName == firstName)
let newState = findChild;
newState.schedules = newState.schedules.filter(sched => sched.date !== date)
this.setState({
children: newState
})
}
Your findChild
is the object that contains the schedules
array, you need to go one level deeper to grab the array and use filter
on it
It should work, with a small correction:
delSched = (firstName, date) => {
let children = [...this.state.children]
let findChild = children.find(child => child.firstName == firstName)
let newState = findChild;
newState.schedules = newState.schedules.filter(sched => sched.date !== date)
this.setState({
children: newState
})
}
Your findChild
is the object that contains the schedules
array, you need to go one level deeper to grab the array and use filter
on it
edited Nov 21 '18 at 21:09
answered Nov 21 '18 at 20:49
Velimir TchatchevskyVelimir Tchatchevsky
2,13411118
2,13411118
Thanks Velimir, but I think this seems to delete the schedules as a whole? After I do this, it crashes the schedules.map within a parent component.
– Tearz
Nov 21 '18 at 21:00
state does not equal findChild.schedules. It should not be placing it there.
– gatsbyz
Nov 21 '18 at 21:07
add a comment |
Thanks Velimir, but I think this seems to delete the schedules as a whole? After I do this, it crashes the schedules.map within a parent component.
– Tearz
Nov 21 '18 at 21:00
state does not equal findChild.schedules. It should not be placing it there.
– gatsbyz
Nov 21 '18 at 21:07
Thanks Velimir, but I think this seems to delete the schedules as a whole? After I do this, it crashes the schedules.map within a parent component.
– Tearz
Nov 21 '18 at 21:00
Thanks Velimir, but I think this seems to delete the schedules as a whole? After I do this, it crashes the schedules.map within a parent component.
– Tearz
Nov 21 '18 at 21:00
state does not equal findChild.schedules. It should not be placing it there.
– gatsbyz
Nov 21 '18 at 21:07
state does not equal findChild.schedules. It should not be placing it there.
– gatsbyz
Nov 21 '18 at 21:07
add a comment |
You can also make it slightly shorter by doing something like this:
let state = { children: [{ id: 1, firstName: 'Bella', lastName: 'Laupama', profile: 'child_care', schedules: [{ date: '25 December, 2018', parent: 'Chris', activity: 'Christmas' }, { date: '28 December, 2018', parent: 'Mischa', activity: 'Christmas with Malane Whanau' }, { date: '31 December, 2018', parent: 'Laura', activity: 'New Years Eve' }, { date: '1 January, 2019', parent: 'Laura', activity: 'New Years Day' } ] }] }
const delSchedule = (arr, name, date) => {
let f = arr.find(x => x.firstName == name)
f.schedules = f ? f.schedules.filter(y => y.date != date) : f.schedules
}
this.setState({
children: delSchedule(this.state.children, 'Bella', '1 January, 2019')
})
This way delSchedule
is not modifying the state but returns the new one which you assign in this.setState
etc.
Thank you @Akrion for your response, however, I'm really struggling to find a way to make this work as I'm not sure how to make this work without it being just one single function?
– Tearz
Nov 21 '18 at 21:29
Not sure I understand ... you want to change the state insidedelSchedule
?
– Akrion
Nov 21 '18 at 21:31
Kind of yeah, I'm setting the state from within the function, much like this... delSched = (firstName, date) => { let children = [...this.state.children] let findChild = children.find(child => child.firstName == firstName) let newState = findChild; newState.schedules = newState.schedules.filter(sched => sched.date !== date) this.setState({ children: newState }) }
– Tearz
Nov 21 '18 at 21:34
add a comment |
You can also make it slightly shorter by doing something like this:
let state = { children: [{ id: 1, firstName: 'Bella', lastName: 'Laupama', profile: 'child_care', schedules: [{ date: '25 December, 2018', parent: 'Chris', activity: 'Christmas' }, { date: '28 December, 2018', parent: 'Mischa', activity: 'Christmas with Malane Whanau' }, { date: '31 December, 2018', parent: 'Laura', activity: 'New Years Eve' }, { date: '1 January, 2019', parent: 'Laura', activity: 'New Years Day' } ] }] }
const delSchedule = (arr, name, date) => {
let f = arr.find(x => x.firstName == name)
f.schedules = f ? f.schedules.filter(y => y.date != date) : f.schedules
}
this.setState({
children: delSchedule(this.state.children, 'Bella', '1 January, 2019')
})
This way delSchedule
is not modifying the state but returns the new one which you assign in this.setState
etc.
Thank you @Akrion for your response, however, I'm really struggling to find a way to make this work as I'm not sure how to make this work without it being just one single function?
– Tearz
Nov 21 '18 at 21:29
Not sure I understand ... you want to change the state insidedelSchedule
?
– Akrion
Nov 21 '18 at 21:31
Kind of yeah, I'm setting the state from within the function, much like this... delSched = (firstName, date) => { let children = [...this.state.children] let findChild = children.find(child => child.firstName == firstName) let newState = findChild; newState.schedules = newState.schedules.filter(sched => sched.date !== date) this.setState({ children: newState }) }
– Tearz
Nov 21 '18 at 21:34
add a comment |
You can also make it slightly shorter by doing something like this:
let state = { children: [{ id: 1, firstName: 'Bella', lastName: 'Laupama', profile: 'child_care', schedules: [{ date: '25 December, 2018', parent: 'Chris', activity: 'Christmas' }, { date: '28 December, 2018', parent: 'Mischa', activity: 'Christmas with Malane Whanau' }, { date: '31 December, 2018', parent: 'Laura', activity: 'New Years Eve' }, { date: '1 January, 2019', parent: 'Laura', activity: 'New Years Day' } ] }] }
const delSchedule = (arr, name, date) => {
let f = arr.find(x => x.firstName == name)
f.schedules = f ? f.schedules.filter(y => y.date != date) : f.schedules
}
this.setState({
children: delSchedule(this.state.children, 'Bella', '1 January, 2019')
})
This way delSchedule
is not modifying the state but returns the new one which you assign in this.setState
etc.
You can also make it slightly shorter by doing something like this:
let state = { children: [{ id: 1, firstName: 'Bella', lastName: 'Laupama', profile: 'child_care', schedules: [{ date: '25 December, 2018', parent: 'Chris', activity: 'Christmas' }, { date: '28 December, 2018', parent: 'Mischa', activity: 'Christmas with Malane Whanau' }, { date: '31 December, 2018', parent: 'Laura', activity: 'New Years Eve' }, { date: '1 January, 2019', parent: 'Laura', activity: 'New Years Day' } ] }] }
const delSchedule = (arr, name, date) => {
let f = arr.find(x => x.firstName == name)
f.schedules = f ? f.schedules.filter(y => y.date != date) : f.schedules
}
this.setState({
children: delSchedule(this.state.children, 'Bella', '1 January, 2019')
})
This way delSchedule
is not modifying the state but returns the new one which you assign in this.setState
etc.
let state = { children: [{ id: 1, firstName: 'Bella', lastName: 'Laupama', profile: 'child_care', schedules: [{ date: '25 December, 2018', parent: 'Chris', activity: 'Christmas' }, { date: '28 December, 2018', parent: 'Mischa', activity: 'Christmas with Malane Whanau' }, { date: '31 December, 2018', parent: 'Laura', activity: 'New Years Eve' }, { date: '1 January, 2019', parent: 'Laura', activity: 'New Years Day' } ] }] }
const delSchedule = (arr, name, date) => {
let f = arr.find(x => x.firstName == name)
f.schedules = f ? f.schedules.filter(y => y.date != date) : f.schedules
}
this.setState({
children: delSchedule(this.state.children, 'Bella', '1 January, 2019')
})
let state = { children: [{ id: 1, firstName: 'Bella', lastName: 'Laupama', profile: 'child_care', schedules: [{ date: '25 December, 2018', parent: 'Chris', activity: 'Christmas' }, { date: '28 December, 2018', parent: 'Mischa', activity: 'Christmas with Malane Whanau' }, { date: '31 December, 2018', parent: 'Laura', activity: 'New Years Eve' }, { date: '1 January, 2019', parent: 'Laura', activity: 'New Years Day' } ] }] }
const delSchedule = (arr, name, date) => {
let f = arr.find(x => x.firstName == name)
f.schedules = f ? f.schedules.filter(y => y.date != date) : f.schedules
}
this.setState({
children: delSchedule(this.state.children, 'Bella', '1 January, 2019')
})
edited Nov 21 '18 at 21:41
answered Nov 21 '18 at 21:13
AkrionAkrion
9,40211224
9,40211224
Thank you @Akrion for your response, however, I'm really struggling to find a way to make this work as I'm not sure how to make this work without it being just one single function?
– Tearz
Nov 21 '18 at 21:29
Not sure I understand ... you want to change the state insidedelSchedule
?
– Akrion
Nov 21 '18 at 21:31
Kind of yeah, I'm setting the state from within the function, much like this... delSched = (firstName, date) => { let children = [...this.state.children] let findChild = children.find(child => child.firstName == firstName) let newState = findChild; newState.schedules = newState.schedules.filter(sched => sched.date !== date) this.setState({ children: newState }) }
– Tearz
Nov 21 '18 at 21:34
add a comment |
Thank you @Akrion for your response, however, I'm really struggling to find a way to make this work as I'm not sure how to make this work without it being just one single function?
– Tearz
Nov 21 '18 at 21:29
Not sure I understand ... you want to change the state insidedelSchedule
?
– Akrion
Nov 21 '18 at 21:31
Kind of yeah, I'm setting the state from within the function, much like this... delSched = (firstName, date) => { let children = [...this.state.children] let findChild = children.find(child => child.firstName == firstName) let newState = findChild; newState.schedules = newState.schedules.filter(sched => sched.date !== date) this.setState({ children: newState }) }
– Tearz
Nov 21 '18 at 21:34
Thank you @Akrion for your response, however, I'm really struggling to find a way to make this work as I'm not sure how to make this work without it being just one single function?
– Tearz
Nov 21 '18 at 21:29
Thank you @Akrion for your response, however, I'm really struggling to find a way to make this work as I'm not sure how to make this work without it being just one single function?
– Tearz
Nov 21 '18 at 21:29
Not sure I understand ... you want to change the state inside
delSchedule
?– Akrion
Nov 21 '18 at 21:31
Not sure I understand ... you want to change the state inside
delSchedule
?– Akrion
Nov 21 '18 at 21:31
Kind of yeah, I'm setting the state from within the function, much like this... delSched = (firstName, date) => { let children = [...this.state.children] let findChild = children.find(child => child.firstName == firstName) let newState = findChild; newState.schedules = newState.schedules.filter(sched => sched.date !== date) this.setState({ children: newState }) }
– Tearz
Nov 21 '18 at 21:34
Kind of yeah, I'm setting the state from within the function, much like this... delSched = (firstName, date) => { let children = [...this.state.children] let findChild = children.find(child => child.firstName == firstName) let newState = findChild; newState.schedules = newState.schedules.filter(sched => sched.date !== date) this.setState({ children: newState }) }
– Tearz
Nov 21 '18 at 21:34
add a comment |
You probably searched for sth like:
delSched = (firstName, date) => {
let newChildren = this.state.children.map( child => {
// don't modify other people
if( child.firstName != firstName ) return child;
// new object
let newChild = {...child}
// mutate schedule by date
newChild.schedules = child.schedules.filter(sched => sched.date !== date)
console.log(newChild);
return newChild
})
this.setState({
children: newChildren
}, () => console.log(this.state.children) )
}
Working code
add a comment |
You probably searched for sth like:
delSched = (firstName, date) => {
let newChildren = this.state.children.map( child => {
// don't modify other people
if( child.firstName != firstName ) return child;
// new object
let newChild = {...child}
// mutate schedule by date
newChild.schedules = child.schedules.filter(sched => sched.date !== date)
console.log(newChild);
return newChild
})
this.setState({
children: newChildren
}, () => console.log(this.state.children) )
}
Working code
add a comment |
You probably searched for sth like:
delSched = (firstName, date) => {
let newChildren = this.state.children.map( child => {
// don't modify other people
if( child.firstName != firstName ) return child;
// new object
let newChild = {...child}
// mutate schedule by date
newChild.schedules = child.schedules.filter(sched => sched.date !== date)
console.log(newChild);
return newChild
})
this.setState({
children: newChildren
}, () => console.log(this.state.children) )
}
Working code
You probably searched for sth like:
delSched = (firstName, date) => {
let newChildren = this.state.children.map( child => {
// don't modify other people
if( child.firstName != firstName ) return child;
// new object
let newChild = {...child}
// mutate schedule by date
newChild.schedules = child.schedules.filter(sched => sched.date !== date)
console.log(newChild);
return newChild
})
this.setState({
children: newChildren
}, () => console.log(this.state.children) )
}
Working code
answered Nov 21 '18 at 22:42
xadmxadm
1,615248
1,615248
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53420176%2fhow-to-delete-an-object-in-an-array-of-an-object-in-an-array%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Why are people downvoting? Please state a reason in comments.
– gatsbyz
Nov 21 '18 at 20:48