There is a list of notifications from the backend. Each notification has a delete button. If I click the delete button of any notification, I want that notification to be deleted.

How do I do this?

my service

const remove = (notificationDto) => {
  return new Observable((observer) => { //<NotificationDto>
    axiosInstance
      .delete(SERVICE_PATH + '/remove', notificationDto)
      .then((response) => {
        observer.next(response.data);
        observer.complete();
      })
      .catch((err) => {
        console.log(err);
      });
  });
};

html

<div className="notificationlist__container only-desktop">
  {props.notification.notificationList.map((notification) => {
    return (
      <div className="notificationlist__time">
        {notification.notificationDay}
        <div className="delete__button">
          <AS.IconButton onClick={() => notificationDataUpdateDeleteClick(notification)}>
            <AS.DeleteIcon />
          </AS.IconButton>
        </div>
      </div>
    );
  })}
</div>

where i call the service

After sending notification as payload, the problem was solved

import { InAppNotificationsService } from 'services/InAppNotificationsService';
import { NotificationContext } from 'contexts/NotificationContext';

const { notificationData, setNotificationData } = useContext(NotificationContext);

const notificationDataUpdateDeleteClick = (notification) => {
  InAppNotificationsService.remove({ data: notification }).subscribe({
    next: (response) => {
      InAppNotificationsService.allNotifications({ nationalId: tckn, externalContactNumber: contactInfo?.externalContactNumber }).subscribe({
        next: (response) => {
          setNotificationData(response);
        },
        error: (error) => {
          console.log(error);
        }
      });
    },
    error: (error) => {
      console.log(error);
    }
  });
};