Is this title clickbait-y? Yes! But, I think it is also true. If you're a learning developer, I know that you've been in a situation like this one before. For me it was learning how to implement API calls in a React application.
I was building a very simple app that I called 'quick-lyrics'. It's a basic application (with even more basic styling) that allows you to search Genius' API for a song. It will display your results and when you select a song, it throws the lyrics up on the right-hand side of the screen. At the time, my grasp on promises was tenuous at best, and my understanding of how data moves through React was worse, but that's why we build projects!
I copied a promise-chaining pattern out of StackOverflow and FINALLY! I got the data pulled down from the Genius API. And let me tell you, I felt like a true *genius…*for about 30 seconds.
I quickly realized that moving data and accessing data was much less straight forward than I thought. I mapped out my application, made diagrams of how the data was supposed to flow, passed the data through props in my components and hit 'Save' just to see nothing populate in my browser. Rinse and repeat several times over three days, and you are left with one very discouraged developer.
The Secret
I didn't see a break in this application until I typed the following command into VSCode multiple times over:
console.log(…)
Yep. That's it.
The most important command in JavaScript. "But, it's the first one I learned, that's how I did my 'Hello World', why would I still need that?" I can hear the complaints, because they are the ones that I would be saying.
Until I logged my data, I had no idea that my async fetching function wasn't written properly!
Get Disciplined
In any project of reasonable size, there are going to be so many different places that things can go wrong as data is getting passed around. Make it a habit to see your data in the console before you go off writing more code! It can save you a ton of time and effort.
Top comments (0)