I'm new to react and am making a gallery of images, with the functionality to save/bookmark certain images (pressing a bookmark next to the respective image). There is a button to "View saved images" at the top, which will show the user just saved images. Upon pressing the button again (which becomes "View All Images"), the user can see all images again.

The way I am rendering the gallery is as follows:

{images.map((image, index) =< {
            if (viewSaved && savedImages.index(image) > -1) {
                     return <Image data={image}/>
             }
            if (!viewSaved) {
                     return <Image data={image} />
           }
         }
}                    

The issue here is that when the user is viewing saved images, and then unsaves an image, it disappears because it gets removed from savedImages immediately. How do I persist this state so that saved images don't disappear when you unsave them, while viewing saved images?

My thought process is I need to freeze the state, and then only update that state when the viewSaved button is clicked, but I'm unsure how to go about doing this the right way.