CODEWITHSUNDEEP
javascriptreactjsstate
Sean
Sean

Reputation: 534

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

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.

Upvotes: 1

Views: 144

Answers (1)

dave
dave

Reputation: 64657

I think you just need to change:

return {
    updatedActiveModal,
};

to

return {
    activeModal: updatedActiveModal,
};

Upvotes: 2

Related Questions