## 🚀 Quick Summary  
Learn how to display error messages like a pro with toast notifications in React and daisyUI! Customizable, easy, fun! 🚨🍞

---

### 👋 **Hello Hive Legends!**

Hope everyone's code is bug-free, and coffee is strong! ☕🐝  
I’m back with my *ReactJS learning* journey, powered by Hive Blockchain.  
This time, we’re getting crispy with toast messages—no burnt edges, I promise! 😂

---

### 📜 **ReactJS Journey So Far**

Missed my earlier posts? No worries! Here’s the binge-list:

- [📚 **Day One**](https://peakd.com/hive-139531/@sagarkothari88/integrate-aioha-with-your-react-app-from-scratch-vite--tailwind--daisyui): Fresh React app + AIOHA integration!
- [🧭 **Day Two**](https://peakd.com/hive-139531/@sagarkothari88/integrating-react-router-my-routing-adventures-with-react): Routing drama & rebellious NavBar 😤
- [🛠️ **Day Three**](https://peakd.com/hive-139531/@sagarkothari88/from-navbar-mess-to-react-router-success-fixing-layouts-routing-and-aioha-in-one-go): Fixed Layouts, Routing & AIOHA 💥
- [🧠 **Day Four**](https://peakd.com/hive-139531/@sagarkothari88/day-4-reactjs-adventures--distriator-progress-usestate-useeffect-and-env-chaos): useState, useEffect, and .env headaches 😅
- [🧹 **Day Five**](https://peakd.com/hive-139531/@sagarkothari88/level-up-your-imports-using-path-aliases-for-cleaner-react--typescript-projects): Path Aliases to clean up relative path spaghetti 🍝
- [📡 **Day Six**](https://peakd.com/hive-139531/@sagarkothari88/day-6-learning-reactjs-calling-apis-and-creating-context-providers-or-distriator-feature-update): Calling APIs & Creating Context Providers

---

![sample image for preview of a toast message](https://miro.medium.com/v2/resize:fit:641/1*jQi00Hw-_FobXU8bGqudaw.jpeg)

---

## 🥳 **Today’s Recipe: Toasting Errors Like a Pro!**

Ever wanted to yell “ERROR!” at your users but in a friendly way? Enter: **toast messages!** 🍞🔥

Let’s learn how to show an error using a daisyUI toast, and *nothing else!*  
Sit back and snack on these steps! 😋

---

### 🔧 **Step 1: Make the Toast Component**

Create this in your React app:

```
src/components/
├── Toast.tsx
```

---

### 🏗️ **Step 2: Define Toast Props**

Props are super important—like ingredients in your toast!  
Here’s what you’ll need:

```
import React, { useEffect } from "react";

type ToastProps = {
  message: string;
  show: boolean;
  setShow: React.Dispatch<React.SetStateAction<boolean>>;
};
```

---

### 🥪 **Step 3: Write the Toast Component**

Your bread and butter code:

```
const Toast: React.FC<ToastProps> = ({ message, show, setShow }) => {
  useEffect(() => {}, [show, setShow]);

  function showToast() {}
  function noToast() {
    return <></>;
  }

  return show ? showToast() : noToast();
};
```

---

### 👀 **Step 4: Get the DaisyUI Snippet**

Copy the error toast code snippet from DaisyUI!  
Here’s how it looks:

![Go to DaisyUI](https://files.peakd.com/file/peakd-hive/sagarkothari88/23tm76xAdfmn7YwZLxBYsqZZch8gyFrPmGaWmxGiZhqFeW6Anv7Mbjsdrx2PAvFG2itvo.png)

Now click on JSX and copy it:

![copy code snippet](https://files.peakd.com/file/peakd-hive/sagarkothari88/23tvAS9o7t3mYBZ2Him6KtFLd82jxC3SuxDW7HofR6hC8CvHmU2HcEScrFbzk39fZCDcX.png)

---

### 🥂 **Step 5: Update showToast() Function**

Display your error toast at the bottom right, always:

```
function showToast() {
  return (
    <div className="fixed bottom-4 right-4 z-50 min-w-[200px] transition-opacity duration-300">
      <div role="alert" className="alert alert-error shadow-lg px-4 py-2 rounded-md">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          className="h-6 w-6 shrink-0 stroke-current"
          fill="none"
          viewBox="0 0 24 24"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="2"
            d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
          />
        </svg>
        <span>{message}</span>
      </div>
    </div>
  );
}
```

---

### ⏱️ **Step 6: Hide Toast Automatically**

No one likes a toast that won’t leave. Use `useEffect` to hide after 1.5 seconds:

```
useEffect(() => {
  if (show) {
    const timer = setTimeout(() => {
      setShow(false);
    }, 1500); // 1.5 seconds!
    return () => clearTimeout(timer);
  }
}, [show, setShow]);
```

---

### 🤩 **Your Finished `Toast.tsx`:**

Check it all out here:  
https://gist.github.com/sag333ar/961a124d77d66551b87d75bfa59e82a7

---

## 🏄 **Using the Toast Message in Your App**

Here’s how to use your new Toast:

```
import Toast from "@/components/Toast";

const HiveUserAvatarButton = () => {
  const [showToast, setShowToast] = useState<boolean>(true);
  const [errorMessage, setErrorMessage] = useState<string>("show an error 1 time");

  function performLogin(result: LoginResult) {
    if (result.success) {
      setIsLoading(true);
    } else {
      setIsLoading(false);
      setErrorMessage(result.error || 'Something went wrong'); // 👈
      setShowToast(true); // 👈 Show Toast
    }
  }
  
  return (
    <>
      {/* your rest of the code */}
      <Toast message={errorMessage} show={showToast} setShow={setShowToast} />
    </>
  );
}
```

---

## 🎯 **Closing Toast: What’s Next?**

With this, your app can shout its errors (gently)! 🗣️

**Real plot twist:** My co-dev discovered [Sonner](https://github.com/emilkowalski/sonner)—it’s even more magical for toasts.  
😭 Mine was pretty cool, but Sonner is next-level!

Try both, and see which one you love!

---

## 💚 **Thank You, Amazing Hive Fam!**

- More power to Hive Community Members! 🚀
- More power to Hive Blockchain! 💪🏻

See you all soon—may your code never fail silently! 😼

---

### 📝 Final Note

- I asked ChatGPT/AI to help optimize this post to make it more readable and viewer-friendly.
- Here is the link where you can find both original content & improvements made by AI
- https://www.perplexity.ai/search/15ab5a4e-8b95-4c10-bef1-11cb135fa05a

---

### 🚀 My Contributions to ♦️ Hive Ecosystem

| Contribution | To | Hive | Ecosystem |
|--------------|----|------|-----------|
| Hive Witness Node | Hive API Node (in progress) | 3Speak Video Encoder Node Operator (highest number of nodes) | 3Speak Mobile App Developer |
| 3Speak Podcast App Developer | 3Speak Shorts App Developer | 3Speak Support & Maintenance Team | [Distriator Developer](https://distriator.com/) |
| [CheckinWithXYZ](https://checkinwith.xyz/) | [Hive Inbox](https://hive-inbox.the-hive-mobile.app/) | [HiFind](https://hifind.the-hive-mobile.app/) | [Hive Donate App](https://donate.the-hive-mobile.app/) |
| Contributed to HiveAuth Mobile App | Ecency ↔ 3Speak Integration | Ecency ↔ InLeo Integration | Ecency ↔ Actifit Integration |
| [Hive Stats App](https://stats.the-hive-mobile.app/) | [Vote for Witness App](https://witness.the-hive-mobile.app/) | [HiveFlutterKit](https://hiveflutterkit.sagarkothari88.one/docs/intro) | [New 3Speak App](https://3speak.sagarkothari88.one/#/?tab=home) |

---



### 🙌 Support Back

❤️ **Appreciate my work? Consider supporting @threespeak & @sagarkothari88!** ❤️

| Vote | For | Witness |
|------|-----|---------|
| [![](https://images.hive.blog/u/sagarkothari88/avatar)](https://witness.the-hive-mobile.app/#/witnesses/@sagarkothari88) | [sagarkothari88](https://witness.the-hive-mobile.app/#/witnesses/@sagarkothari88) | @sagarkothari88 |
| [![](https://images.hive.blog/u/threespeak/avatar)](https://witness.the-hive-mobile.app/#/witnesses/@threespeak) | [threespeak](https://witness.the-hive-mobile.app/#/witnesses/@threespeak) | @threespeak |

---