React.js: Updating an Array of Objects stored in state

Question

I have an Array of Objects that I'm storing in state with each Object storing values I want to then use to render components:

const activeModal = [
    { modalName: 'dashboard', modal: Dashboard, active: true, icon: DashboardIcon, iconColor: 'black', iconBackground: 'white' },
    { modalName: 'memsline', modal: MEMsLine, active: false, icon: MEMsLineIcon, iconColor: 'white', iconBackground: 'black' },
    { modalName: 'mems', modal: MEMsGrid, active: false, icon: MEMsIcon, iconColor: 'white', iconBackground: 'black' },
    { modalName: 'events', modal: Events, active: false, icon: EventIcon, iconColor: 'white', iconBackground: 'black' },
    { modalName: 'people', modal: People, active: false, icon: PeopleIcon, iconColor: 'white', iconBackground: 'black' },
    { modalName: 'places', modal: Places, active: false, icon: PlaceIcon, iconColor: 'white', iconBackground: 'black' },
    { modalName: 'music', modal: Music, active: false, icon: MusicIcon, iconColor: 'white', iconBackground: 'black' },
    { modalName: 'movies', modal: Movies, active: false, icon: MovieIcon, iconColor: 'white', iconBackground: 'black' },
    { modalName: 'tvshows', modal: TVShows, active: false, icon: TVIcon, iconColor: 'white', iconBackground: 'black' },
    { modalName: 'games', modal: Games, active: false, icon: GameIcon, iconColor: 'white', iconBackground: 'black' },
    { modalName: 'settings', modal: UserSettings, active: false, icon: SettingsIcon, iconColor: 'white', iconBackground: 'black' }
]

I am trying to write a function that updates the Array of Objects when a button is clicked. I have the button set up to call the function openModal onClick and pass back the modalName as follows:

openModal = modalType => () => {
    this.setState(state => {
        const updatedActiveModal = state.activeModal.map(item => {
            if (item.active === true) {
                return {
                    modalName: item.modalName,
                    modal: item.modal,
                    active: false,
                    icon: item.icon,
                    iconColor: 'white',
                    iconBackground: 'black'
                };
            } else if (item.modalName === modalType) {
                return {
                    modalName: item.modalName,
                    modal: item.modal,
                    active: true,
                    icon: item.icon,
                    iconColor: 'black',
                    iconBackground: 'white'
                };
            } else {
                return item;
            }
        });
        return {
            updatedActiveModal,
        };
    });
};

However, when I click the button nothing is happening. What I would expect to happen is that the activeModal Array of Objects is updated to change the modal that is currently active's active value to false, the iconColor to 'white' and the backgroundColor to 'black'. It should also change the active value of the modal that was clicked on from false to true, the iconColor to 'black' and the backgroundColor to 'white' and save all the changes to state. I can't figure out what I'm doing wrong as the code looks like it should work.

dave · Accepted Answer · 2020-07-30 19:34:51Z

2

I think you just need to change:

return {
    updatedActiveModal,
};

to

return {
    activeModal: updatedActiveModal,
};

answered Jul 30, 2020 at 19:34

dave

65k6 gold badges81 silver badges98 bronze badges

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

2 Comments

Sean Over a year ago

Yep, you're right - I was so close! Thank you. Can you explain why activeModal: is needed so I can learn why it's required?

dave Over a year ago

when you do return { updatedActiveModal, }; it's equivalent to return { updatedActiveModal: updatedActiveModal, };, so your state would then have {activeModal /* old value */, updatedActiveModel /* new value */ }, but elsewhere in your code you only look at state.activeModal, so you need to tell state to replace your activeModel with your updatedActiveModal, not add a new key/value pair to state.

Collectives™ on Stack Overflow

React.js: Updating an Array of Objects stored in state

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related