Append object into an array inside a object

Question

NOTE: I'm open to other solutions. The objective of this code is to easily get all events on a particular day by accessing it with a date. This might not be the greatest solution.

I want to push an "event" object into the correct array however I can't get it to work.

Below is the object that I want to "add" to.

this.state = {
    events: {
        Wed Apr 14 2021 00:00:00 GMT+0200 (Central European Summer Time): [],
        Tue Apr 15 2021 00:00:00 GMT+0200 (Central European Summer Time): [],
        and so on....
    }
}

The "date-key"'s time is always the same (00:00:00 GMT+0200 (Central European Summer Time)) however not the day, month, or year.

And here is my attempt to get this to work:

addEvent(event) {
        const events = this.state.events;
        const date = event.date;
        let list = [];

        if (typeof events[date] !== 'undefined') {
            list = events[date];
        }

        list.push(event);
        //console.log(events[date]);

        this.setState({
            events: {
                [date]: list
            }
        });
    }

(The event parameter that is passed in is an object with a "new Date()" attribute as event.date.)

Wed Apr 14 2021 00:00:00 GMT+0200 (Central European Summer Time). The time is always the same (00:00:00 GMT+0200 (Central European Summer Time)) however not the day, month, or year. @maioman — hampani
– hampani, Commented Apr 13, 2021 at 7:37
You can have a variable name with space in between. So what you want to achieve in state is not possible with that name. — Yadab
– Yadab, Commented Apr 13, 2021 at 7:46
@Yadab I create the variable name by using events: { [date]: list } as you can see in the addEvent function where date is a "new Date()". I'm however open to other solutions. — hampani
– hampani, Commented Apr 13, 2021 at 7:49
Do you mean you want list of the events with the date? Or list of events for the particular date? — Yadab
– Yadab, Commented Apr 13, 2021 at 7:54
I want a list of events for the particular date. I.e. on Monday there are [Swim, Walk, Run] and on Tuesday there are [Jump, Eat] and so on. — hampani
– hampani, Commented Apr 13, 2021 at 7:58

Yadab · Accepted Answer · 2021-04-13 08:03:39Z

2

You can do something like this. Based on the latest comment you have made.

addEvent(event) {
        const { events } = this.state;
        const date = event.date.getTime();
        let list = [];

        if (typeof events[date] !== 'undefined') {
            list = events[date];
        }

        list.push(event);
        //console.log(events[date]);

        this.setState((state) => ({
            events: {
                ...state.events,
                [date]: list,
            },
        }));
    }

Remember to create a date if your event.date is not type of Date.

addEvent(event) {
        const { events } = this.state;
        const date = new Date(event.date)

answered Apr 13, 2021 at 8:03

Yadab

1,9031 gold badge12 silver badges16 bronze badges

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

Comments

Shubham Khatri · Accepted Answer · 2021-04-13 07:37:50Z

1

Maintain an array for days in a way you store them in events state lie

let days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

Now you can use the date.getUTCDay() or date.getDay() function depending on whether date in in UTC for or not to extract the day and then update it in your state

addEvent(event) {
    const events = this.state.events;
    const dayOfWeek = days[event.date.getUTCDay()];
    let list = [];

    if (typeof events[dayOfWeek ] !== 'undefined') {
        list = events[dayOfWeek];
    }

    list.push(event);
    this.setState({
        events: {
            ...this.state.events,
            [dayOfWeek]: list
        }
    });
}

answered Apr 13, 2021 at 7:37

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

5 Comments

hampani Over a year ago

I might have phrased the question poorly the "day" key looks like this: "Wed Apr 14 2021 00:00:00 GMT+0200 (Central European Summer Time)" because I need separate events for each day. The time is always the same (00:00:00 GMT+0200 (Central European Summer Time)) however not the day, month, or year.

Shubham Khatri Over a year ago

The logic should still work as long as date is a Date Object. If it is not, you can create a Date object using new Date(event.date) and then use the above logic

Yadab Over a year ago

Seems like this will work for you as per your requirement.

hampani Over a year ago

I might be a bit slow, but does this support an infinite amount of events? I need events for each day. I.e. Monday week 10, Monday week 11, and so on. Sorry if these are stupid questions, this is my first React project :)

Ravikumar Over a year ago

Also list.push(event); this will mutate the original array. To be in safe side, you can use directly [dayOfWeek]: list.concat(event).

Collectives™ on Stack Overflow

Append object into an array inside a object

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related