kell.dev

An Experiment in Error

Aug 2019

This is a list of all the errors I found in a single day of working on my capstone project. These are their stories.

Error: Warning: Each child in a list should have a unique "key" prop.

How: This popped up as soon as I started my server. I knew it was coming as it had stumped me the previous day. After reading some articles on Stack Overflow and a helpful lesson in class, I felt prepared to implement a solution.

Almost There: key={thought.id}

I typed this in and got all ready to move on with my code. This was it for sure!

Solution: key={thought.thoughtId}

The exact same error popped up again. I was so convinced that thought.id would solve the problem, I didn't actually know what to do. So I turned to my old friend: a fresh cup of coffee.

I decided to console.log the variable I was working on to see what was coming back from the server. It turns out that each thought in the array did have a unique ID, but it was called thoughtId, not just ID. I slammed thought.thoughtId into the space for my key, and the error disappeared! Now each of the thoughts returning from my database were identified by their unique key prop. I could move on!

Error: User image/profile pic not displaying on thought cards

I was able to return the entire thought object complete with the image URL of the user's uploaded photo, but no image displayed on the screen itself. I tried changing the height and width of the card but nothing happened.

Solution: added component="img" per MaterialUI documentation

So I went directly to the source. As soon as I opened the example components code about cards, I saw a line I hadn't added: component="img". The documentation explained that it may be helpful to declare this in some use cases. As soon as I added this call, my images popped right up! Great!

Error: User image taking up entire card with no text

Now I had the exact opposite problem: all image, no text.

Solution: imported CardActionArea and added to Card, added gutterBottom to typography to send text below image

After playing with the height and width of the card to see if it was a space issue, I dove right back into the documentation. This time, I focused on the tags in MaterialUI. I found that there was another property I could add called gutterBottom, and that put my text directly underneath the image. Thank goodness! Now my cards had text and images and I could keep moving forward.

Forgot a , between height and width inside my classes styling

As I worked on styling the elements in my React component, I got some unexpected red squigglies in my VSCode editor. I thought it was something wrong with my class declarations, but after more coffee and squinting through my code, I realized I was missing a comma in between my styles. An easy fix, thankfully.

Error: is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.

I kept noticing an error at the top of my console every time I'd open it in my localhost browser. It was warning me about the Link element I was attempting to import and use from React Router Dom. I wasn't sure where I went wrong in my casing, so I copied and pasted the exact error message I was getting in Google. It looked like I was back to Stack Overflow...

Solution - change component="Link" to component={Link}

I changed import Link from 'react-router-dom/Link'; to import { Link } from 'react-router-dom'. Destructuring the component like this allowed me to change the variable from a string to an object and that solved my problem.

Error: ./src/pages/login.js Line 19: 'handleSubmit' is not defined no-undef

This one had me stumped for a bit as handleSubmit was clearly being defined in my code. I could see it right in front of me existing but I wasn't sure why it wasn't being referenced by my component.

Solution: handleSubmit needed to be defined inside the component, not outside of it

My variable was defined as the function I needed it to be, but it was above the component I needed to reference, so it was out of scope. As soon as I moved it underneath the constructor, my page worked again correctly!

One of the hardest things I've encountered about becoming a web developer is the sheer amount of things you can't know. It feels surreal to work in a field where learning and researching is an integral part of the job. No one expects every single line of code to be perfect the first time you write it. People who've been working professionally for years still forget brackets and miss semi-colons. Learning how to learn from my errors instead of being embarrassed by them has been one of my favorite parts of class so far.

Topics Covered

  1. Working Through Errors
  2. Capstone Project
  3. Class Updates