Notifications List Component in React.js Demo

This is a demo of a notifications list component in React.js that demonstrates the use of the useNotifications hook. This component allows users to view a list of notifications and mark them as read or unread.

Code Demo

    
      import React from 'react';
      import useNotifications from './useNotifications';

      function NotificationsList() {
        const { notifications, markAsRead, markAsUnread } = useNotifications();

        return (
          <div>
            <h2>Notifications</h2>
            <ul>
              {notifications.map(notification => (
                <li key={notification.id}>
                  {notification.message}
                  <button onClick={() => markAsRead(notification.id)}>Mark as Read</button>
                  <button onClick={() => markAsUnread(notification.id)}>Mark as Unread</button>
                </li>
              ))}
            </ul>
          </div>
        );
      }

      export default NotificationsList;
    
  

Explanation

In the above code, we have created a NotificationsList component that uses the useNotifications hook to manage the list of notifications. The hook provides us with the current list of notifications, as well as functions to mark a notification as read or unread.

How to Use

To use the NotificationsList component in your React.js application, simply import it and place it wherever you want to display a list of notifications. You can then customize the UI and functionality according to your needs.

Conclusion

The useNotifications hook provides a simple and efficient way to manage notifications in a React.js application. By using this hook, you can easily create a notifications list component that allows users to view and manage their notifications.