How can I manage notification state in a React application?

How can I manage notification state in a React application?

You can manage notification state in React using the useState hook to track notifications and useEffect to handle side effects.

Can you show me a simple example of how to implement this?

Sure! You can create a notifications array in your state and a function to add or remove notifications. Here's a basic example:

import React, { useState } from 'react';

const NotificationComponent = () => {
  const [notifications, setNotifications] = useState([]);

  const addNotification = (message) => {
    setNotifications([...notifications, message]);
  };

  const removeNotification = (index) => {
    setNotifications(notifications.filter((_, i) => i !== index));
  };

  return (
    <div>
      <button onClick={() => addNotification('New message!')}>Add Notification</button>
      <ul>
        {notifications.map((note, index) => (
          <li key={index}>
            {note} <button onClick={() => removeNotification(index)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

This will allow you to add and remove notifications dynamically.

What about handling notifications when the component unmounts?

You can use the useEffect hook to clean up notifications when the component unmounts. For example, you might want to clear notifications or perform any necessary cleanup.