How to delete an object in an array of an object in an array?












0















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})
}
}
}
}









share|improve this question

























  • Why are people downvoting? Please state a reason in comments.

    – gatsbyz
    Nov 21 '18 at 20:48
















0















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})
}
}
}
}









share|improve this question

























  • Why are people downvoting? Please state a reason in comments.

    – gatsbyz
    Nov 21 '18 at 20:48














0












0








0








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})
}
}
}
}









share|improve this question
















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






share|improve this question















share|improve this question













share|improve this question




share|improve this question








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



















  • 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












5 Answers
5






active

oldest

votes


















1














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);





share|improve this answer
























  • 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



















1














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;
}





share|improve this answer





















  • 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 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











  • @Tearz Yes. I will.

    – gatsbyz
    Nov 21 '18 at 21:11



















0














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






share|improve this answer


























  • 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



















0














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.






share|improve this answer


























  • 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











  • 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



















0














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






share|improve this answer























    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
    });


    }
    });














    draft saved

    draft discarded


















    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









    1














    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);





    share|improve this answer
























    • 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
















    1














    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);





    share|improve this answer
























    • 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














    1












    1








    1







    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);





    share|improve this answer













    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);






    share|improve this answer












    share|improve this answer



    share|improve this answer










    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



















    • 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













    1














    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;
    }





    share|improve this answer





















    • 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 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











    • @Tearz Yes. I will.

      – gatsbyz
      Nov 21 '18 at 21:11
















    1














    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;
    }





    share|improve this answer





















    • 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 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











    • @Tearz Yes. I will.

      – gatsbyz
      Nov 21 '18 at 21:11














    1












    1








    1







    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;
    }





    share|improve this answer















    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;
    }






    share|improve this answer














    share|improve this answer



    share|improve this answer








    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 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











    • @Tearz Yes. I will.

      – gatsbyz
      Nov 21 '18 at 21:11














    • 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 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











    • @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











    0














    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






    share|improve this answer


























    • 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
















    0














    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






    share|improve this answer


























    • 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














    0












    0








    0







    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






    share|improve this answer















    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







    share|improve this answer














    share|improve this answer



    share|improve this answer








    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



















    • 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











    0














    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.






    share|improve this answer


























    • 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











    • 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
















    0














    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.






    share|improve this answer


























    • 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











    • 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














    0












    0








    0







    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.






    share|improve this answer















    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')
    })






    share|improve this answer














    share|improve this answer



    share|improve this answer








    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 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



















    • 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











    • 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











    0














    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






    share|improve this answer




























      0














      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






      share|improve this answer


























        0












        0








        0







        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






        share|improve this answer













        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







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 21 '18 at 22:42









        xadmxadm

        1,615248




        1,615248






























            draft saved

            draft discarded




















































            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.




            draft saved


            draft discarded














            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





















































            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







            Popular posts from this blog

            Costa Masnaga

            Fotorealismo

            Sidney Franklin