DEV Community

Cover image for Debugging Saturday: React is not cooperating with me
Jude Pineda
Jude Pineda

Posted on

Debugging Saturday: React is not cooperating with me

Hello! This post originally started as a dummy post to test how the DEV.to API communicates with my website. Well, since I'm here anyway, I might as well describe what I'm trying to accomplish.

The Problem 👻

I'm using @emasuriano's amazing Mate starter for GatsbyJS. I'm trying to use DEV.to posts instead of Medium posts. I have successfully changed the source plugin to gatsby-source-dev and my DEV.to posts have been successfully grabbed by GraphQL, but I'm trying to figure out how to render the actual elements on my website.

My site successfully outputs the cards - one for each blog post because I have two posts so far - but the elements are returned as 'undefined':

Alt Text

An attempt at a solution 🤔

I really think it has something to do with the render function after my GraphQL query. Hopefully I get this fixed by the end of the week - I would like to have a nice portfolio website out as soon as I can. Who doesn't?

What I learned 🎓

I discovered what the ES6 spread function is. It's a pretty nifty tool - if we were using ES6 at work, I would definitely use it.

I have also learned about lambda functions. When I was trying to find out what the double => arrow => function means, I was visited by a ghost of my undergrad years - function currying. I am so glad I have learned all about it in school; otherwise, I would have been much more confused.

Status

This is my first time debugging a React web app. Talk about a trial by fire 🔥! The solution might come as a very simple one for some, but I'm still trying to unravel all the abstractions on this code, and I'm already on my second Starbucks drink.

I should probably get dinner. My head hurts.

Top comments (0)