Yooooooooooo?!?!? I know I'm not the only one!
I'm not the only newbie coder out here who just finished their first full-stack project, so to speak, and feel like what the actual f@!#k am I doing here?🤬 I'm just not. Dewey decimal that point! In other words, store it in the library. It matters.
So, I've spun up my first full-stack project. It has a React front-end and a Sinatra API back-end. It was meant to be a little back-and-forth tic, tac, toe-ish game of wizards dueling. To keep myself and my 8-year-old son entertained while I worked, I decided to go with a fan fave theme: Harry Potter. It didn't quite turn out as I expected, but my little man was encouraging every time I looked defeated and frustrated. I have a long way to go to make this thing reach the potential I first set for it but for now, I learned something and satisfied all my project requirements, and.......well, I let it do what it do, babe.
First and foremost, sweat the small stuff. It matters. The small stuff had me all jacked up..........like, debugging saves your life! Ding, ding, ding! It's so important. Use that -ish ALL THE TIME.
Second, A lot of new coders do not read the errors. Doing that is essential. I was doing it, and my classmates were doing it whenever we met to help each other work through code issues. This is a big no-no. I learned the hard way and so did they. Error messages usually pinpoint the general area of the problem, and you can work from there. (Let's be real, the system tells you the exact line: LINE #SUCH-N-SUCH <= LOOK HERE!)
Instead, new coders just start fiddling around until the code works the way they want it to without knowing how they are actually using the data. I am she, and she is I. Guilty. I'm reading errors all day, ery-day now. That's why I'm easy like Sunday morning. Shout out to Lionel Richie. Let's get back to it. If you are trying to go somewhere and a roadblock appears, aka "an error," READ IT! And read the MF thoroughly. Stop rushing through learning to code. Take breaks. Let it settle in. Take breaks. Get back on the grind. TAKE BREAKS!! I worked on this project for 3 and a half weeks. My biggest breakthroughs were after I got a good night's rest or took a real break (lunch and a 30min TV show). Leave the code. Let your personal servers rest, and come back to it fresh.
Third point. I'm only making three points, and then I'll input some actual coding success for -ishes and -iggles.
I'm writing this blog on fumes but I think I'm the funniest then and I'm trying not to bleep myself, but it don't quite hit like sh#ts and giggles. Is that what you say when you're typing and trying not to type profanity? Bleep, yourself? 🤷🏽♀️ I hope by now, you are reading to laugh more than learn. Just saying.........
Things fall apart, but piece by piece can be put back together again with a vitamin called perseverance. I was determined to understand why I could not access certain data. I found out that props and params are not the same. Kiss my (shut your mouth). I know I am not the only one who was doing the same thing. Learning how to code in a boot camp sometimes makes you rush through truly understanding a process and the logical pathway of the code to complete a lab or a project. Don't do this! You will not become a good coder. Gotta start at good to become great, and damn it! I'm on my way! I didn't feel the need to type sensor that one. Ya feel me?!? Now to the code:
I don't want you to think I'm just some clever, amateur comedian who is trying to code. I know a thing or two. 😬
In the graphic above, I have placed a debugger in my code after my useParams declaration within the component I am working on. Here is where the magic happens. If you look at the scope to the right of the sources tab, I have access to :id via the URL and with the help of useHistory hook helping to generate a param known as :id. I have also passed in my wizards and spells arrays as props. So, what can I do with this information?
Here you see how I used the wizards array and the id, which happened to be a string (so it needed to be parsed to an integer) to access this object specific to this route's :id. Yay! Now to get it on the page.
This graphic shows how I used the filter method on the spells array (which happens to have a foreign key per its association with the wizards) to retrieve the spell data pertaining to that specific wizard.
This took me a while to figure out, but it was a great learning experience. It took hours of failures and a visit to office hours for an instructor to remind me of the gem I had that is the debugger; and how I can have a fail-safe route to accessing my data by utilizing the console. I'm so happy she saved me from myself. Thanks Nancy. Sweat the small stuff. It'll save you a lot of headaches, and use all the tools the wonderful world of newbie coder has given you. You, too, are on your way to being great. And keep laughing through the failures. Your mental health will thank you for it.
Top comments (0)