'Toast message when onChange trigger

I want to show toast message when user change the option in dropdown. Can i place toast.success when user click on option. I have onClick thats make changes of status. How can i implement toast message when someone click on option.

import { useState } from 'react';

import { Popup } from 'components';
import { Angle } from 'icons';
import { theme } from 'styles';

import { Pill, Option } from './StatusDropdown.styled';
import { toast } from "react-hot-toast";

interface StatusDropdownProps {
  value: string;
  options: { value: string | null; label: string; color: string }[];
  onChange: (value: string | null) => void;
}
const StatusDropdown: React.FC<StatusDropdownProps> = ({ value, options, onChange }) => {
  const [isOpen, setIsOpen] = useState(false);
  const currentOption = options.find((opt) => opt.value === value);
  return (
    <div className="relative">
      <Pill
        bgColor={currentOption?.color}
        onClick={() => {
          if (!isOpen) {
            setIsOpen(true);
          }
        }}
      >
        <span className="flex items-center">
          {currentOption?.label ?? '-'}
          <Angle className="ml-3" fill={theme.colors.white} />
        </span>
      </Pill>
      <Popup isOpen={isOpen} setIsOpen={setIsOpen}>
        <ul>
          {options.map((opt) => (
            <Option
              color={opt.color}
              key={`${value}_${nanoid()}`}
              onClick={() => onChange(opt.value)}
            >
              {opt.label}
            </Option>
          ))}
        </ul>
      </Popup>
    </div>
  );
};

export default StatusDropdown;


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source