change one value of all elements of the list react

Question

A notification list is coming from the backend. All my notifications are available in this list. All elements of this list have 'seen' information. (eg: 'seen=0'). When the user clicks on the notification button on the home page, the seen information on all notifications should be updated as (seen=1) (eg: 'seen=1').

I'm pretty sure the "seen" service is working correctly (put service).

const handleNotificationClick = (event) => {

  InAppNotificationsService.seen().subscribe({
    next: (response) => {
      InAppNotificationsService.allNotifications({ nationalId: tckn, externalContactNumber: contactInfo?.externalContactNumber }).subscribe({
        next: (response) => {
          console.log(response);
        },
        error: (error) => {
          console.log(error);
        }
      });
    },
    error: (error) => {
      console.log(error);
    }
  });
};

my icon

<AS.NotificationsOutlinedIcon
  className="header__notification_icon"
  onClick={handleNotificationClick}
/>

NotificationContext

export const NotificationContext = createContext(undefined);

const NotificationProvider = (props) => {
  const [notificationData, setNotificationData] = useState();

  const { tckn, contactInfo } = useContext(UserDataContext);

  useEffect(() => {
    if (notificationData === undefined && tckn !== undefined && contactInfo !== undefined) {
      setNotificationData({});
      InAppNotificationsService.allNotifications({ nationalId: tckn, externalContactNumber: contactInfo?.externalContactNumber }).subscribe({
        next: (response) => {
          setNotificationData(response);
        },
        error: (error) => {
          console.log(error);
        }
      });
    }
  }, [notificationData, tckn, contactInfo]);

  return (
    <NotificationContext.Provider
      value={useMemo(() => {
        return ({
          notificationData,
          setNotificationData,
          tckn,
          contactInfo,
        });
      }, [notificationData, setNotificationData, tckn, contactInfo])}
    >
      {props.children}
    </NotificationContext.Provider>
  );
};

export default NotificationProvider;

notification list

{
    "newNotification": true,
    "notificationList": [
        {
            "type": "proposal",
            "id": 25786,
            "createdAt": "2022-06-28T09:28:04.384+00:00",
            "externalContactNumber": "1169887",
            "productType": "CASCO",
            "classType": "PROPOSAL",
            "read": 0,
            "seen": 0,
            "active": 1,
            "text": "Size özel hazırladığımız Kasko teklifinizi sepette unuttunuz! Tekrar incelemek ve kolayca satın almak için lütfen tıklayınız.",
            "proposalNo": "0400204963",
            "policyCode": "701",
            "proposalType": "CASCO"
        },
        {
            "type": "proposal",
            "id": 25787,
            "createdAt": "2022-06-28T09:28:04.385+00:00",
            "externalContactNumber": "1169887",
            "productType": "CASCO",
            "classType": "PROPOSAL",
            "read": 0,
            "seen": 0,
            "active": 1,
            "text": "Size özel hazırladığımız Kasko teklifinizi sepette unuttunuz! Tekrar incelemek ve kolayca satın almak için lütfen tıklayınız.",
            "proposalNo": "0400204651",
            "policyCode": "701",
            "proposalType": "CASCO"
        },
        {
            "type": "proposal",
            "id": 25788,
            "createdAt": "2022-06-28T09:28:04.386+00:00",
            "externalContactNumber": "1169887",
            "productType": "CASCO",
            "classType": "PROPOSAL",
            "read": 0,
            "seen": 0,
            "active": 1,
            "text": "Size özel hazırladığımız Kasko teklifinizi sepette unuttunuz! Tekrar incelemek ve kolayca satın almak için lütfen tıklayınız.",
            "proposalNo": "0400205061",
            "policyCode": "701",
            "proposalType": "CASCO"
        },
        {
            "type": "proposal",
            "id": 25789,
            "createdAt": "2022-06-28T09:28:04.386+00:00",
            "externalContactNumber": "1169887",
            "productType": "CASCO",
            "classType": "PROPOSAL",
            "read": 0,
            "seen": 0,
            "active": 1,
            "text": "Size özel hazırladığımız Kasko teklifinizi sepette unuttunuz! Tekrar incelemek ve kolayca satın almak için lütfen tıklayınız.",
            "proposalNo": "0400204652",
            "policyCode": "718",
            "proposalType": "CASCO"
        },
        {
            "type": "proposal",
            "id": 25790,
            "createdAt": "2022-06-28T09:28:04.400+00:00",
            "externalContactNumber": "1169887",
            "productType": "CASCO",
            "classType": "PROPOSAL",
            "read": 0,
            "seen": 0,
            "active": 1,
            "text": "Size özel hazırladığımız Kasko teklifinizi sepette unuttunuz! Tekrar incelemek ve kolayca satın almak için lütfen tıklayınız.",
            "proposalNo": "0400205062",
            "policyCode": "718",
            "proposalType": "CASCO"
        },
        {
            "type": "proposal",
            "id": 25791,
            "createdAt": "2022-06-28T09:28:04.403+00:00",
            "externalContactNumber": "1169887",
            "productType": "CASCO",
            "classType": "PROPOSAL",
            "read": 0,
            "seen": 0,
            "active": 1,
            "text": "Size özel hazırladığımız Kasko teklifinizi sepette unuttunuz! Tekrar incelemek ve kolayca satın almak için lütfen tıklayınız.",
            "proposalNo": "0400204650",
            "policyCode": "701",
            "proposalType": "CASCO"
        },
        {
            "type": "proposal",
            "id": 25792,
            "createdAt": "2022-06-28T09:28:04.406+00:00",
            "externalContactNumber": "1169887",
            "productType": "CASCO",
            "classType": "PROPOSAL",
            "read": 0,
            "seen": 0,
            "active": 1,
            "text": "Size özel hazırladığımız Kasko teklifinizi sepette unuttunuz! Tekrar incelemek ve kolayca satın almak için lütfen tıklayınız.",
            "proposalNo": "0396139526",
            "policyCode": "701",
            "proposalType": "CASCO"
        },
        {
            "type": "proposal",
            "id": 26008,
            "createdAt": "2022-06-29T07:53:41.462+00:00",
            "externalContactNumber": "1169887",
            "productType": "CASCO",
            "classType": "PROPOSAL",
            "read": 0,
            "seen": 0,
            "active": 1,
            "text": "Size özel hazırladığımız Kasko teklifinizi sepette unuttunuz! Tekrar incelemek ve kolayca satın almak için lütfen tıklayınız.",
            "proposalNo": "0400662086",
            "policyCode": "701",
            "proposalType": "CASCO"
        },
        {
            "type": "proposal",
            "id": 26009,
            "createdAt": "2022-06-29T07:53:41.463+00:00",
            "externalContactNumber": "1169887",
            "productType": "CASCO",
            "classType": "PROPOSAL",
            "read": 0,
            "seen": 0,
            "active": 1,
            "text": "Size özel hazırladığımız Kasko teklifinizi sepette unuttunuz! Tekrar incelemek ve kolayca satın almak için lütfen tıklayınız.",
            "proposalNo": "0400662083",
            "policyCode": "701",
            "proposalType": "CASCO"
        },
        {
            "type": "proposal",
            "id": 26010,
            "createdAt": "2022-06-29T07:53:41.466+00:00",
            "externalContactNumber": "1169887",
            "productType": "CASCO",
            "classType": "PROPOSAL",
            "read": 0,
            "seen": 0,
            "active": 1,
            "text": "Size özel hazırladığımız Kasko teklifinizi sepette unuttunuz! Tekrar incelemek ve kolayca satın almak için lütfen tıklayınız.",
            "proposalNo": "0400661981",
            "policyCode": "701",
            "proposalType": "CASCO"
        },
        {
            "type": "proposal",
            "id": 26011,
            "createdAt": "2022-06-29T07:53:41.468+00:00",
            "externalContactNumber": "1169887",
            "productType": "CASCO",
            "classType": "PROPOSAL",
            "read": 0,
            "seen": 0,
            "active": 1,
            "text": "Size özel hazırladığımız Kasko teklifinizi sepette unuttunuz! Tekrar incelemek ve kolayca satın almak için lütfen tıklayınız.",
            "proposalNo": "0400661977",
            "policyCode": "718",
            "proposalType": "CASCO"
        },
        {
            "type": "proposal",
            "id": 26012,
            "createdAt": "2022-06-29T07:53:41.469+00:00",
            "externalContactNumber": "1169887",
            "productType": "CASCO",
            "classType": "PROPOSAL",
            "read": 0,
            "seen": 0,
            "active": 1,
            "text": "Size özel hazırladığımız Kasko teklifinizi sepette unuttunuz! Tekrar incelemek ve kolayca satın almak için lütfen tıklayınız.",
            "proposalNo": "0400662079",
            "policyCode": "701",
            "proposalType": "CASCO"
        },
        {
            "type": "proposal",
            "id": 26013,
            "createdAt": "2022-06-29T07:53:41.470+00:00",
            "externalContactNumber": "1169887",
            "productType": "CASCO",
            "classType": "PROPOSAL",
            "read": 0,
            "seen": 0,
            "active": 1,
            "text": "Size özel hazırladığımız Kasko teklifinizi sepette unuttunuz! Tekrar incelemek ve kolayca satın almak için lütfen tıklayınız.",
            "proposalNo": "0400662085",
            "policyCode": "718",
            "proposalType": "CASCO"
        },
        {
            "type": "proposal",
            "id": 26014,
            "createdAt": "2022-06-29T07:53:41.471+00:00",
            "externalContactNumber": "1169887",
            "productType": "CASCO",
            "classType": "PROPOSAL",
            "read": 0,
            "seen": 0,
            "active": 1,
            "text": "Size özel hazırladığımız Kasko teklifinizi sepette unuttunuz! Tekrar incelemek ve kolayca satın almak için lütfen tıklayınız.",
            "proposalNo": "0400661980",
            "policyCode": "701",
            "proposalType": "CASCO"
        },
        {
            "type": "proposal",
            "id": 26015,
            "createdAt": "2022-06-29T07:53:41.471+00:00",
            "externalContactNumber": "1169887",
            "productType": "CASCO",
            "classType": "PROPOSAL",
            "read": 0,
            "seen": 0,
            "active": 1,
            "text": "Size özel hazırladığımız Kasko teklifinizi sepette unuttunuz! Tekrar incelemek ve kolayca satın almak için lütfen tıklayınız.",
            "proposalNo": "0400662084",
            "policyCode": "701",
            "proposalType": "CASCO"
        },
        {
            "type": "proposal",
            "id": 26016,
            "createdAt": "2022-06-29T07:53:41.473+00:00",
            "externalContactNumber": "1169887",
            "productType": "CASCO",
            "classType": "PROPOSAL",
            "read": 0,
            "seen": 0,
            "active": 1,
            "text": "Size özel hazırladığımız Kasko teklifinizi sepette unuttunuz! Tekrar incelemek ve kolayca satın almak için lütfen tıklayınız.",
            "proposalNo": "0400661982",
            "policyCode": "718",
            "proposalType": "CASCO"
        },
        {
            "type": "proposal",
            "id": 26017,
            "createdAt": "2022-06-29T07:53:41.473+00:00",
            "externalContactNumber": "1169887",
            "productType": "CASCO",
            "classType": "PROPOSAL",
            "read": 0,
            "seen": 0,
            "active": 1,
            "text": "Size özel hazırladığımız Kasko teklifinizi sepette unuttunuz! Tekrar incelemek ve kolayca satın almak için lütfen tıklayınız.",
            "proposalNo": "0400661979",
            "policyCode": "701",
            "proposalType": "CASCO"
        },
        {
            "type": "proposal",
            "id": 26018,
            "createdAt": "2022-06-29T07:53:41.474+00:00",
            "externalContactNumber": "1169887",
            "productType": "CASCO",
            "classType": "PROPOSAL",
            "read": 0,
            "seen": 0,
            "active": 1,
            "text": "Size özel hazırladığımız Kasko teklifinizi sepette unuttunuz! Tekrar incelemek ve kolayca satın almak için lütfen tıklayınız.",
            "proposalNo": "0400662080",
            "policyCode": "701",
            "proposalType": "CASCO"
        },
        {
            "type": "proposal",
            "id": 26019,
            "createdAt": "2022-06-29T07:53:41.474+00:00",
            "externalContactNumber": "1169887",
            "productType": "CASCO",
            "classType": "PROPOSAL",
            "read": 0,
            "seen": 0,
            "active": 1,
            "text": "Size özel hazırladığımız Kasko teklifinizi sepette unuttunuz! Tekrar incelemek ve kolayca satın almak için lütfen tıklayınız.",
            "proposalNo": "0400661975",
            "policyCode": "718",
            "proposalType": "CASCO"
        }
    ]
}

How do I update the 'seen' value of all notification elements to (seen=1) after the user presses the notification button?

Answer 1

Your context need to expose state updater which you will call inside handleNotificationClick after you do whatever you need to do (eg. async call to perform server-side seen operation). I guess you are having something like this in you context:

 const [notifications, setNotifications] = useState({});
    
 useEffect(() => ..get notifications and set to state, []);
    
 return <NotifcationsContext.Provider value={notifications}>
            {children} 
         </NotifcationsContext>

What you need is to expose state updater for notifications list, so you would need to add state setter in context. Like this:

 const [notifications, setNotifications] = useState({});
    
 useEffect(() => ..get notifications and set to state, []);
 
 // Here you just expose updater for 'notificationList' part of the state
 const updateNotificationList = (listUpdater) => {
    setNotfications(prev => ({...prev, notificationList: listUpdater(prev.notificationList)});
 }

// Now we need to extend context value
const context = { state: notifications, actions: updateNotificationList  }
    
 return <NotifcationsContext.Provider value={context}>
            {children} 
         </NotifcationsContext>

And finally inside handleNotificationClick you just need to call this state updater in order to update the state:

    const { state, actions } = useNotifcationsContext();       

    const handleNotificationClick = (event) => {
    // and here find the place where you want to trigger update
    // and add this below
       actions.updateNotificationList(list => list.map(notf => ({...notf, seen: 1 }));
    };

This is just an idea of how you should implement it with context, of course you may be working with class based or something like that, but I believe you will understand idea in general. You can add memoization into your context, use useReducer for stable update since you need to expose state updater, etc.