'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 |
|---|
