AI App Development from Zero Knowledge – 1000 Hours #15

#15: Jumping Through a Minefield of Code

Summary:
This episode recounts a real-time struggle with a “blood-red screen” full of React errors. From duplicate variable declarations to missing props, it covers classic pitfalls that trip up beginners. Through a back-and-forth with ChatGPT, we explore the debugging process and uncover the core mechanics of props in React. If you’ve ever felt the frustration of being told something is “undefined” when you know it’s there—this one’s for you.

A Red Screen and the “Why, Though?”

One day, a minor tweak led to chaos—a screen drenched in red and error messages like:

• props is not defined
• onMorningMeeting is not defined
• falseReportCount has already been declared

Me:

“Huh? I did define those!”

Panicked, I turned to ChatGPT for help.

Me:

“I removed props, and now I’m drowning in errors!”

ChatGPT:

“If you destructure props, you should use xxx instead of props.xxx.”

That made sense. Still, it’s that feeling of “But it exists!” that gets you every time.

---

What Does "Received But Undefined" Even Mean?

My component had this:

{
  "falseReportCount": 3,
  "setFalseReportCount": "function",
  "onMorningMeeting": "function"
}

Yet it still threw an “undefined” error.

Me:

“Look, onMorningMeeting is clearly on line 99. Why the error?”

ChatGPT:

“The parent component (App.js) might not be passing it down.”

And boom—there it was. In React, props don’t magically appear. They must be explicitly passed down from a parent component like App.js. Otherwise, they're just wishful thinking.

---

Debugging Reveals Structure

The biggest takeaway? Fixing errors helps you understand how React actually works.

• Defining the same variable with both useState and props? That’ll cause a conflict.
• Using props.xxx vs destructuring with { xxx }—this must be intentional from the start.
• Never assume it’s being passed—always check the parent.

These are things you only realize when something breaks. Errors are React’s way of teaching you.

---

Lessons from Today

• When destructuring props, use xxx not props.xxx
• Double-check if the parent component is passing the values properly
• Avoid naming collisions between useState and props
• Don’t take errors personally—they’re just breadcrumbs

---

Bonus: Sample JSON-Style Code

{
  "falseReportCount": 0,
  "setFalseReportCount": "(count) => setState(count)",
  "onMorningMeeting": "() => alert('Morning meeting complete')"
}

The moments when code won’t run are the most frustrating. But they’re also the moments that build your real skills. Once again, failure turned out to be the best teacher.