Grok API Debugging Prompt — Fix Code Errors on XChat

Expected Grok Result

XChat is Live! Run this prompt in-app to see the magic.

Simulated Grok Reply

Root cause: You're calling `.map()` on a value that's `undefined` at runtime because the async fetch hasn't resolved yet. One sentence: your component renders before the data arrives. Fixed version: ```js const items = data?.items ?? []; return items.map(item => <Item key={item.id} {...item} />); ``` Bonus: add a loading state check before the map. If `data` is undefined, return a skeleton. This is the #1 React bug that senior devs still write on Mondays.